如何使面包屑响应？

Question

我已经将bootstrap3用于RWD并定制了我的痕迹。但是，它不适合移动尺寸 我怎样才能使其响应？ 附上问题的截图。

感谢

Answer 1

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

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

您可以将此痕迹配置为

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

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

Answer 2

您将不得不自己编写代码。没有您的具体代码，没有人能够给您具体的答案。话虽这么说，我将如何设置为我的Bootstrap网站添加自定义代码。

使用less

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

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

请注意，Bootstrap首先是移动设备，这意味着默认样式将应用于较小的屏幕，并覆盖较大的设置。

不少用

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