Bootstrap导航证明奇数响应问题

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解决方案似乎并未保持设计选项卡的完整性。这就是我想出来的。

如果您的自助式样式没有用得少，只需用768px替换@ screen-sm

@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文件，我相信您在第4109行使用Bootstrap version 3.0。

@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

This is a known bug with Bootstrap.

自2013年以来，这已在Chrome中修复，但仍然是open bug in WebKit，并且会在Safari中出现。

  

Safari出现了一个错误，其中横向调整浏览器大小会导致在刷新时清除的对齐导航中的渲染错误。此错误也显示在对齐的导航示例中。    - cvrebert

我建议不要使用.nav-justified，否则可以在Safari中无法正常使用。