twitter-bootstrap 网格内的 Bootstrap 3 内联导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27902263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 inline navbar inside grid
提问by Coding Enthusiast
I made simple bootstrap navbar, but how to get it to fit in grid system, I would like to be col-md-8or other cause I am new to this grid system, I know how to make simple stuff but not this.
我制作了简单的引导导航栏，但是如何让它适合网格系统，我想成为col-md-8或其他原因我是这个网格系统的新手，我知道如何制作简单的东西但不是这个。
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Flatie</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Here is the JsFiddle
这是JsFiddle
回答by Coding Enthusiast
wrap it in a div with class of row or even better wrap all your code in a div of class container. like below:
将它包装在一个具有行类的 div 中，或者更好地将所有代码包装在一个类容器的 div 中。像下面这样：
<div class="container">
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Flatie</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div><!--end of row-->
<div class="row">add other contain</div>
</div><!--end of container-->
回答by Onkar Deshpande
By default nav element gets full width but if you want to include it in the grid system then include Nav element inside element having classes as per the grid system i.e. col-md-8, col-xs-6 etc..
默认情况下，导航元素获得全宽，但如果您想将其包含在网格系统中，则将导航元素包含在具有网格系统类的元素内，即 col-md-8、col-xs-6 等。
for e.g.
例如
'<div class="col-md-8"> <nav class="navbar navbar-default navbar-fixed-top" role="navigation">'...
... Your nav menu Code
'</nav></div><div class="col-md-4"></div>'
回答by Onkar Deshpande
Ok I did it, I wrapped the container in a row, I gave the container a class col-md-8 and centered. In css id did this with centered:
好的，我做到了，我将容器排成一排，我给容器一个类 col-md-8 并居中。在 css id 中以居中方式执行此操作：
.centered {
margin: 0 auto;
float: none
}
margin 0 auto is to center float none is because col-md-8 has float left.
margin 0 auto 是居中浮动 none 是因为 col-md-8 有浮动左边。
