Bootstrap 3了解导航条崩溃和导航导航条-导航

Question

这是导航栏菜单的代码片段：

<div class="collapse navbar-collapse" id="navHeaderCollapse2">
<ul class="nav navbar-nav">
<li I .... </li>
</ul>
</div>

什么定义了ul类"nav navbar-nav“的宽度？当我在开发工具中查看页面时，我看到了项目(li)，但我不知道是什么定义了宽度。

我问的原因是我有4个"li“项(3个锚点和一个asp:LoginStatus控件)。在IE中，所有4个项目都在一行中；这就是我想要的。但当我在Chrome中查看页面时，最后一项(asp:LoginStatus)插入下一行。这一切都在一个大显示器上。

我意识到这与Bootstrap 3在webkit引擎中的工作方式有关，但我不知道如何自定义更改它。在Chrome中，UL属性会在“用户代理样式表”中吗？

已通过将UL的内联样式设置为“width:900px”解决此问题。但是很想知道为什么-在这个属性被覆盖之前- UL的宽度是612px。

Answer 1

我知道这个问题比较老，但解决此类问题的最好方法是使用浏览器工具找出样式是从哪个类设置的。

在你的例子中，我不能在这里重现它(可能是由于小的版本颠簸和错误修复)，我可以看到宽度没有显式地设置在一个‘nav navbar-nav ul’元素上，所以它是从子控件的组合宽度传播的。

这通常是正在设置的子元素的某些其他属性(例如额外的填充或边距)的症状，而Bootstrap本身并不需要这些属性。也可能是某个容器元素无意中没有留下结束标记。您现在可以使用超级方便的Bootlint检查器来确保您的文档结构和类符合Bootstrap的预期，甚至可以将其添加到CI过程中。