如何引导辩解导航栏，导航3

Question

我试图证明一个navbar（使导航栏内容舒展）在引导3.我已经添加margin: 0 auto; max-width: 1000px;到nav*类，并且还试图将container元素添加为父母ul。作为最后一张支票，我做了in this answer的建议，在navbar类中增加了navbar-justified，但是这导致所有东西在左边一起缩小而没有证明整个导航栏。

做一个nav nav-justifiedul确实让ul中心，但它不保留的样式navbar-nav类的，因为它不是ul的一部分，而当屏幕比768px较小它看起来并不大。

我该如何证明Bootstrap 3 navbar？

编辑：对于那些有兴趣谁更完整的答案，这里是一些代码，我在生产中使用：

// 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> 

而且here is a working jsFiddle。您可能需要拉伸result框的大小才能正确显示。如果您有兴趣将实际列表居中，而导航无法拉伸至全宽，请参阅David Taiaroa's jsFiddle。

Answer 1

事实证明，默认情况下，所有navbar-nav>li元素都有一个float: left属性，这就是为什么他们都在向左滚动。一旦我添加了下面的代码，它使navbar都居中并且不会缩小。

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

希望这可以帮助其他人谁是寻找一个居中navbar。

Answer 2

您可以通过使用证明导航栏内容：

@media (min-width: 768px){ 
    .navbar-nav{ 
    margin: 0 auto; 
    display: table; 
    table-layout: fixed; 
    float: none; 
    } 
} 

看到这个直播：http://jsfiddle.net/panchroma/2fntE/

祝你好运！

Answer 3

为了证明引导3导航栏-NAV证明菜单到100％的宽度，你可以使用此代码：

@media (min-width: 768px){ 
    .navbar-nav { 
     margin: 0 auto; 
     display: table; 
     table-layout: auto; 
     float: none; 
     width: 100%; 
    } 
    .navbar-nav>li { 
     display: table-cell; 
     float: none; 
     text-align: center; 
    } 
} 

Answer 4

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
<div class="container"> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
</div> 
<div class="collapse navbar-collapse"> 
    <ul class="nav navbar-nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#about">About</a></li> 
    <li><a href="#contact">Contact</a></li> 
    </ul> 
</div> 

，并为CSS

@media (min-width: 768px) { 
    .navbar > .container { 
     text-align: center; 
    } 
    .navbar-header,.navbar-brand,.navbar .navbar-nav,.navbar .navbar-nav > li { 
     float: none; 
     display: inline-block; 
    } 
    .collapse.navbar-collapse { 
     width: auto; 
     clear: none; 
    } 
} 

现场看到它http://www.bootply.com/103172

Answer 5

这是一个更简单的解决方案。只需删除“navbar-nav”类并添加“导航对齐”。

Answer 6

我知道这是一个旧帖子，但我想分享我的解决方案。我花了几个小时试图做出合理的导航菜单。你并不需要修改bootstrap css中的任何东西。只需要在html中添加正确的类。当屏幕达到768px

<nav class="nav navbar-default navbar-fixed-top"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#top">Brand Name</a> 
     </div> 
     <div class="collapse navbar-collapse" id="collapsable-1"> 
      <ul class="nav nav-justified"> 
       <li><a href="#about-me">About Me</a></li> 
       <li><a href="#skills">Skills</a></li> 
       <li><a href="#projects">Projects</a></li> 
       <li><a href="#contact-me">Contact Me</a></li> 
      </ul> 
     </div> 
    </nav> 

这个CSS代码会直接删除导航栏，品牌类。

media@(min-width: 768px){ 
    .navbar-brand{ 
     display: none; 
    } 
} 

Answer 7

嗨，你可以用下面这个代码工作的合理的资产净值

<div class="navbar navbar-inverse"> 
    <ul class="navbar-nav nav nav-justified"> 
     <li class="active"><a href="#">Inicio</a></li> 
     <li><a href="#">Item 1</a></li> 
     <li><a href="#">Item 2</a></li> 
     <li><a href="#">Item 3</a></li> 
     <li><a href="#">Item 4</a></li> 
    </ul> 
</div>