如何在Bootstrap 3中证明navbar-nav的合理性 [英] How to justify navbar-nav in Bootstrap 3

问题描述

我正在尝试证明Bootstrap中 navbar 的合理性(使导航栏内容伸展) 3.我已经将margin: 0 auto; max-width: 1000px;添加到nav*类中，并且还尝试将container元素作为父元素添加到ul.作为最后检查，我通过在navbar类中添加navbar-justified来完成在此答案中建议的操作.这导致所有内容在左侧对齐，而没有证明整个导航栏的合理性.

I'm attempting to justify a navbar (make the navbar contents stretch) in Bootstrap 3. I've added margin: 0 auto; max-width: 1000px; to the nav* classes, and also attempted to add a container element as a parent to the ul. As a last check, I did what was suggested in this answer by adding navbar-justified to the navbar class, but this caused everything to scrunch together on the left without justifying the entire navbar.

执行nav nav-justified ul确实使ul居中，但是它不保留navbar-nav类的样式，因为它不是ul的一部分，而且看起来也不好当屏幕小于768px时.

Doing a nav nav-justified ul does make the ul center, but it doesn't retain the styles of the navbar-nav class since it's not part of the ul, and it doesn't look great when the screen is smaller than 768px.

我如何证明Bootstrap 3 navbar?

How do I justify a Bootstrap 3 navbar?

对于那些对更完整答案感兴趣的人，这里是我在生产中使用的一些代码:

For those who are interested in a more complete answer, here is some code I use in production:

// Stylesheet
.navbar-nav>li {
  float: none;
}

// Navbar
<nav class="navbar navbar-default">
  <ul class="nav nav-justified navbar-nav">
    <li><a href="/">Home</a></li>
    <li><a href="group.html">Group</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="positions.html">Positions</a></li>
  </ul>
</nav>

这是一个有效的jsFiddle .您可能需要拉伸result框的大小才能使其正确显示.如果您有兴趣将实际列表居中放置而不将导航扩展到全角，请参阅 David Taiaroa的jsFiddle .

And here is a working jsFiddle. You may have to stretch the size of the result box for it to show correctly. If you're interested in centering the actual list without the nav stretching to full width, see David Taiaroa's jsFiddle.

推荐答案

事实证明，所有navbar-nav>li元素默认都有一个float: left属性，这就是为什么它们都向左滚动的原因.一旦我添加了下面的代码，它使navbar既居中又不收紧.

It turns out that there is a float: left property by default on all navbar-nav>li elements, which is why they were all scrunching up to the left. Once I added the code below, it made the navbar both centered and not scrunched up.

.navbar-nav>li {
        float: none;
}

希望这有助于其他希望将navbar居中的人.

Hope this helps someone else who's looking to center a navbar.

这篇关于如何在Bootstrap 3中证明navbar-nav的合理性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！