jquery - 如何在没有响应功能的情况下使用 bootstrap3x 中的 nav-pill 和 nav-justified

Question

我真的很想在我的元素中实现这个:

<div class="container">
        <ul class="nav nav-pills nav-justified">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Downloads</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
      </div>
</div>

但是我有一个需求，那就是去掉响应式功能。更准确地说 - 当屏幕变小时防止垂直堆叠。

昨天，我花了一整天的时间寻找使 Bootstrap 3 无响应的方法。我尝试创建自定义 css 文件来覆盖我想要的功能，但由于我刚刚开始深入研究 CSS，我发现这非常困难，而且目前 - 不可能手动更改所有需要更改的内容。我尝试使用官方网站上的编译器并取得了一些成功，但仍然留下了一些响应功能(例如表单中使用的类仍然导致元素崩溃)。然后我尝试了here中的bassjobsen的工作它非常接近，但最终当我今天与我的老板交谈时，我们决定我们也将减少流动性并坚持定义的宽度。所以我回到官方网站，其中有一个部分描述了如何删除响应性，您可以阅读 here但问题是该建议和为此建议提供的示例只是部分解决方案。例如，我的 nav-pills 在达到一定宽度后仍然崩溃。我下载并包含了示例元素中的 non-responsive.css 文件，所以这不是问题。正如我所看到的，人们必须手动修改每个类，并且没有简单的方法可以使 bootstrap 3 仅适用于高分辨率设备(如果我错了，请纠正我)。

很抱歉我无法提供更多代码，我已经做了很多尝试，但我认为它们没有任何帮助。如果有人遇到过同样的问题并有解决方案，我们将不胜感激。我计划放弃 bootstrap 并只使用纯 CSS/jQuery 代码，但我真的很喜欢这个功能，我想在继续之前将其添加到我的设计中。

Answer 1

您好，在这个特定的菜单中，您可以执行以下操作:

• 删除nav-justified类即可删除响应式样式。

• 两个人制作具有固定宽度的容器。

  .container {
    width:800px;
  }
  

查看此演示 http://jsfiddle.net/52VtD/561/ 。

最后，如果您仅将 bootstrap 用于视觉主题，我认为这不是最好的方法。

要保持nav-justified的样式，您可以跟踪它并将其放置在其他类中:

.nav-pills li {
  float:none;
  display:table-cell;
  width:1%;
  text-align:center;
}

演示 http://jsfiddle.net/52VtD/566/

编辑

这里的逻辑 -->

我删除了nav-justified类，因为它是最后一个覆盖ul上的样式的类，并且可能是媒体查询调用的类。因此，删除它可以避免媒体查询声明，并且不会更改响应式的位置或显示。

为了保持视觉效果，nav-justified 添加了一些样式，我只获取这些样式并将其放在不采用响应部分的其他类声明之上。

如果您在这里搜索 http://getbootstrap.com/dist/css/bootstrap.css您可以找到媒体查询声明调用的类。