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文件，因此这不是问题。正如我所看到的那样，必须手动修改每个类，并且没有简单的方法可以为高分辨率设备制作引导程序3（如果我错了请纠正我）。

对不起，我无法提供更多代码，我做了很多尝试，但我认为他们没有任何帮助。如果有人遇到同样的问题并且有解决方案，那将非常感激。我打算放弃引导程序和纯CSS / jQuery代码，但我真的很喜欢这个功能，我想在继续之前将它添加到我的设计中。

Answer 1

您可以在此特定菜单中执行此操作：

删除班级nav-justified会删除自适应样式。
两个人使用固定的width制作容器。
```
.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/

修改

逻辑在这里 - ＆gt;

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

为了保持视觉效果nav-justified添加一些样式，我只获得这些样式，并将其放在另一个没有响应部分的类声明中。

如果你在这里搜索http://getbootstrap.com/dist/css/bootstrap.css，你会发现媒体查询声明会调用这个类。

如何在没有响应功能的情况下使用bootstrap3x导航对齐的nav-pill

1 个答案: