如何在 Bootstrap 3 中证明导航栏导航 [英] How to justify navbar-nav in Bootstrap 3

问题描述

我正在尝试证明 navbar(使导航栏内容拉伸)在 Bootstrap 3 中.我添加了 margin: 0 auto;max-width: 1000px; 到 nav* 类，并尝试添加 container 元素作为 ul 的父元素>.作为最后一次检查，我按照在本答案中的建议进行了操作，方法是将 navbar-justified 添加到navbar 类，但这导致所有内容都在左侧紧缩在一起，而没有证明整个导航栏的合理性.

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>lifloat: 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 中证明导航栏导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！