如何使面包屑导航具有响应式设计？

Question

我已经使用了Bootstrap 3来实现响应式设计，并自定义了面包屑导航。但是，在移动端尺寸上，它并不适合。
我该如何使其具有响应性？
以下是问题的截图。谢谢。

- Smitha

---

请添加您的面包屑HTML和CSS代码。尝试使用媒体查询来更改较小屏幕的CSS样式。 - Bass Jobsen

由于我正在使用Bootstrap，是否有必要使用媒体查询？ - Smitha

是的，您仍然需要媒体查询来区分您的桌面和移动版本。 - Bass Jobsen

如果你的移动站点需要面包屑导航，可以尝试阅读以下链接：http://ux.stackexchange.com/a/16211。也许你走错了方向 :-) - Henrik Stenbæk

Answer 1

我已经在 bootsnipp 上创建了一个代码片段，可能符合您的需求。

您可以配置此面包屑以：

- 仅显示最后 n 个元素。如果隐藏了元素，则在列表开头添加省略号。 - 为每个元素设置最大大小。如果标签太长，则在标签后添加省略号。

通过设置断点，您可以为不同的屏幕尺寸设置要显示的元素数量和它们的最大大小，并确保没有任何溢出。 http://bootsnipp.com/snippets/featured/responsive-breadcrumbs

- Franck Valentin

Answer 2

您需要自己编写代码。没有您具体的代码，没有人能给您具体的答案。话虽如此，以下是我设置在Bootstrap网站上添加自定义代码的步骤。

使用less

首先，创建一个新的.less文件-这个文件将成为您的新主样式表。在该文件中，导入bootstrap.less文件。编译该文件并在HTML文件中链接它。现在您应该拥有一个与开箱即用的Bootstrap CSS完全相同的副本，并且可以访问所有Bootstrap变量。

要进行任何添加，请在导入语句下面将它们添加到该文件中。因此，在您的情况下，我会获取媒体查询和面包屑的变量（在variables.less中找到），并自定义较小屏幕上面包屑的样式。

请注意，Bootstrap是移动优先的，这意味着默认样式将应用于较小的屏幕，您可以为较大的屏幕覆盖。

不使用less

如果您不熟悉使用less，那么我认为这是一个很好的机会开始。话虽如此，如果您想以传统方式完成，则只需创建第二个样式表，将其链接在Bootstrap表格下方，然后开始编码即可。

- Sean Ryan