【发布时间】：2016-01-23 03:14:43
【问题描述】：
你能看看这里吗？ http://jsfiddle.net/c0w27sbe/ 我正在尝试将左侧导航垂直居中，因为目前位于容器顶部。
html：
<nav id="topNavigation" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Responsive navigation -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<!-- top navigation-->
<ul class="nav navbar-nav navbar-left col-md-16 col-sm-16 col-xs-16">
<li>
<a href="">Manufracturer<br>Approved</a>
</li>
<li>
<a href="">Customer 1st<br>We'll visit you</a>
</li>
<li>
<a href="">Excess<br>SAFE</a>
</li>
<li>
<a href="">Friendly Form-<br>Free Help</a>
</li>
<li>
<a href="">FREE-<br>Accident Management</a>
</li>
</ul>
<!-- Social media icons -->
<ul class="nav navbar-nav navbar-right col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-4 col-xs-offset-4">
<li>
<a href="#facebook"><i class="icon icon-facebook"></i></a>
</li>
<li>
<a href="#googleplus"><i class="icon icon-twitter"></i></a>
</li>
<li>
<a href="#twitter"><i class="icon icon-youtube"></i></a>
</li>
</ul>
<!-- End navbar-right -->
<div class="clearfix"></div>
</div>
<!-- End navbar-collapse-1 -->
</div>
<!-- End container-fluid -->
</nav>
css
#topNavigation.navbar-default {
background:black;
text-align: center;
font-family:'Droid Sans', sans-serif;
font-weight:700;
font-size:1.2em;
}
#topNavigation.navbar-default .navbar-nav {
border: 1px solid yellow;
}
#topNavigation ul.nav:nth-child(2) > li > a {
border-right:none;
box-shadow:none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
padding:0;
}
#topNavigation ul.nav:nth-child(2) > li {
float:none;
display:inline-block;
}
#topNavigation ul.nav:nth-child(2) > li > a > i {
font-size:3em;
line-height: 1.2;
color: #808080;
background-color: #fff;
border-radius: 50%;
box-shadow: 1px 0px 0px 1px #808080 inset;
}
#topNavigation ul.nav:nth-child(2) {
height: 100%;
vertical-align: middle;
display: inline-block; }
#topNavigation ul.nav:first-child {
margin: 0;
vertical-align: middle;
display: inline-block;
}
#topNavigation ul.nav:first-child li a {
padding:0;
}
.navbar-nav > li {
float: left;
}
这是 bootstrap.css 上的一些样式，但我找不到它是什么所以我可以抵消它：S
您会看到，如果您从外部资源中删除 bootstrap.css，它会按我的意愿工作！
谢谢
【问题讨论】：
-
除非您使用自定义构建，否则这些类在 Bootstrap 中不存在 >
col-md-16 col-sm-16 col-xs-16请参阅 Grid Options 和 Navbar
标签： html css twitter-bootstrap navigation vertical-alignment