在Bootstrap 3中如何certificatenavbar-nav
我试图certificate一个navbar （使导航栏内容拉伸）在引导3.我已经添加了margin: 0 auto; max-width: 1000px; margin: 0 auto; max-width: 1000px; 到nav*类，并且还尝试将一个container元素作为父项添加到ul 。 作为最后一个检查，我做了这个答案中的build议，在navbar类中添加了navbar-justified navbar ，但是这导致所有东西在左边一起缩小而没有certificate整个导航栏的正确性。
做一个nav nav-justified ul确实是ul中心，但是它不保留navbar-nav类的样式，因为它不是ul的一部分，当屏幕小于768px时，它看起来并不好看。
我如何certificate一个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>
这里是一个工作jsFiddle 。 您可能需要拉伸result框的大小才能正确显示。 如果你有兴趣集中实际列表，而不需要导航到全宽，请参阅David Taiaroa的jsFiddle 。
您可以使用以下命令来validation导航栏的内容：
@media (min-width: 768px){ .navbar-nav{ margin: 0 auto; display: table; table-layout: fixed; float: none; } }
看到这个生活： http : //jsfiddle.net/panchroma/2fntE/
祝你好运！
为了certificate引导3 navbar-navalignment菜单到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; } }
事实certificate，默认情况下，在所有的navbar-nav>li元素中都有一个float: left属性，这就是为什么它们都在向左滚动。 一旦我添加下面的代码，它使navbar都居中，而不是揉成一团。
.navbar-nav>li { float: none; }
希望这有助于其他正在寻找中心navbar 。
这是一个更简单的解决scheme。 只要删除“navbar-nav”类，并添加“导航alignment”。
<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; } }
我知道这是一个旧的职位，但我想分享我的解决scheme。 我花了几个小时试图做一个合理的导航菜单。 你并不需要修改bootstrap css中的任何东西。 只需要在html中添加正确的类。
<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>
当屏幕达到768px时，这个CSS代码将简单地删除导航品牌类。
media@(min-width: 768px){ .navbar-brand{ display: none; } }
嗨，你可以使用下面的代码工作certificate导航
<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>
