twitter-bootstrap-3 - Bootstrap nav 合理的奇怪响应问题

Question

一旦你降低导航器的宽度，导航就会开始变得很好，这很棒。一旦您打开窗口备份，导航项目将分为两行。这是一张照片。

它是这样开始的：

http://reggi.myshopify.com/pages/about#

Answer 1

FWIW，我发现强制重绘有.nav-justified问题的元素有助于 WebKit 理解。显然，你如何选择这取决于你——我选择了fadeIn()，因为当生活给你柠檬时......

$(window).bind('resize', function(){
    var w = $(this).width(),
        threshold = 768;

        if(w < threshold){
            $('.nav-justified').hide().fadeIn();
        }
});

Answer 2

这两个答案似乎都缺乏。JS解决方案会导致很多闪烁，而CSS解决方案似乎并没有保持设计标签的完整性。这就是我想出的。

如果您没有在引导样式中使用 less，只需将 @screen-sm 替换为 768px

@media (min-width: @screen-sm) {
    .nav-tabs.nav-justified > li {
        display: block;
        float: left;
        width: 32.9999%
    }
}

Answer 3

问题是display: table-cell;课堂教学.nav-justified。

让我们看一下bootstrap.css文件，我相信您正在使用Bootstrap version 3.04109 行。

@media (min-width: 768px) {
  .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }

您必须将其更改为：

@media (min-width: 768px) {
      .nav-tabs.nav-justified > li {
        display: inline-block;
        float: left;
        margin-left: 100px;
      }

}

这将解决您的问题。

Answer 4

这是 Bootstrap 的一个已知错误。

自 2013 年以来，这已在 Chrome 中得到修复，但在 WebKit 中仍然是一个未解决的错误，并且发生在 Safari 中。

Safari 存在一个错误，在该错误中水平调整浏览器大小会导致对齐导航中的呈现错误，刷新时会清除这些错误。这个错误也显示在合理的导航示例中。—简历

我建议不要使用.nav-justified它或在 Safari 中无法正常使用它。