pull-right 和 pull-left 类可以对齐块元素。我想知道导航栏是否有相应的 pull-top 和 pull-bottom ?
<header id="navbar" role="banner" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="logo pull-left" href="/" title="Home">
<img src="logo.png" alt="Home">
</a>
<div class="nav-collapse collapse">
<nav role="navigation">
<ul class="menu nav">
<li>...</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
目标是将菜单(ul.nav
)与导航栏底部对齐。
答案 0 :(得分:14)
这个问题的答案实际上取决于CSS的功能。 .pull-right
和.pull-left
都应用了micro-clearfix,然后在Twitter Bootstrap中向左或向右浮动元素。
创建.pull-top
和.pull-bottom
类'是不可行的,因为父元素需要应用position:relative
,因此该元素需要人工处理{{1 }}和top
属性可以正确放置它。替代方案将要求元素具有固定高度,其中负边距应用于顶部,高度的一半并且应用bottom
。同样,这需要父项为top:50%
。
与任何CSS框架一样,您必须自己做一些事情:-(。