There are pull-right and pull-left classes to align block elements. I'm wondering if there is corresponding pull-top and pull-bottom workable for navbar?
<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>
To goal is to align the menu (ul.nav
) to the bottom of navbar.
The answer to this really lies in the capabilities of CSS. .pull-right
and .pull-left
both apply a micro-clearfix and then float the element left or right in Twitter Bootstrap.
Creating .pull-top
and .pull-bottom
class' would not be feasible as the parent elements would need to have a position:relative
applied, the element would then need man-handled around with top
and bottom
properties to have it placed properly. The alternatives would require the element to have a fixed height with negative margin applied to the top, of half the height and top:50%
applied. Again this would need the parent to be position:relative
.
As with any CSS framework, there are just some things you will have to do yourself :-(.