Bootstrap nav 合理的奇怪响应问题答案

【问题标题】：Bootstrap nav justified odd responsive issueBootstrap nav 合理的奇怪响应问题
【发布时间】：2013-10-16 20:07:05
【问题描述】：

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

它是这样开始的：

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

【问题讨论】：

已在 github github.com/twbs/bootstrap/issues/11132提交问题

标签： twitter-bootstrap-3 nav

【解决方案1】：

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

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

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

【讨论】：

谢谢！似乎从 *.width() 768px 时会出现问题。可以像我一样选择仅在出现这种情况时才使用这种创可贴。
另外，您可以使用 *.fadeIn(speed, easing, callback) 的参数来进一步改进解决方案，例如使用 *.fadeIn(0) 将淡入时间减少到 0 毫秒，所以重绘效果是即时的。默认值为 400 毫秒。

【解决方案2】：

这两个答案似乎都缺乏。 JS 解决方案会导致很多闪烁，而 CSS 解决方案似乎无法保持设计的选项卡的完整性。这是我想出的。

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

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

【讨论】：

【解决方案3】：

问题在于.nav-justified 类中的display: table-cell; 指令。

我们看一下bootstrap.css文件，我相信你在使用Bootstrap version 3.0，在第4109行。

@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;
      }

}

这将解决您的问题。

【讨论】：

我不想编辑引导源。有没有办法覆盖引导媒体查询？
当然可以，您只需要在您的 CSS 文件中创建一个类并将上面的代码添加到其中即可。之后，你在 li 标签中指定你的新类。
注意，如果你不想在每个li标签中添加它，你可以将它添加到ul标签中，然后像Bootstrap那样使用.newClass > li，或其他方式。
@ThomasReggi - 这（或其他）是否为您解决了这个问题？遗憾的是，以上内容不为我工作。
@cuzzi 不，也没用。我最终放弃了.nav-justified。

【解决方案4】：

This is a known bug with Bootstrap.

自 2013 年以来，Chrome 已修复此问题，但仍为 open bug in WebKit 并出现在 Safari 中。

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

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

【讨论】：