iphone - 如何使面包屑响应？

Question

我已将 bootstrap3 用于 RWD 并自定义了我的面包屑。但是，它不适合移动尺寸。
我怎样才能让它响应？
附上问题截图。

谢谢

Answer 1

我在 bootsnipp 上创建了一个片段，可能适合您的需求。

http://bootsnipp.com/snippets/featured/responsive-breadcrumbs

您可以将此面包屑配置为

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

通过设置断点，您可以设置要显示的元素数量以及不同屏幕尺寸的最大尺寸，从而确保不会出现任何溢出。

Answer 2

您将不得不自己编写代码。没有你的具体代码，没有人能给你具体的答案。话虽如此，这就是我将如何设置以将自定义代码添加到我的 Bootstrap 网站。

少用

首先，创建一个新的 .less 文件——这个文件将是你新的主要样式表。在该文件中，导入 bootstrap.less 文件。编译该文件并将其链接到您的 HTML 文件中。您现在应该拥有开箱即用的 Bootstrap CSS 的精确副本，可以访问所有 Bootstrap 变量。

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

请注意，Bootstrap 是移动优先的，这意味着默认样式将应用在较小的屏幕上，而您会覆盖较大的屏幕。

不使用更少

如果您不习惯使用更少，我会说这是一个很好的开始机会。话虽如此，如果你想用老式的方式来做，那么只需创建一个链接的第二个样式表，将它添加到 Bootstrap 表下面，然后编写代码。