13

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.

enter image description here

zessx
  • 65,078
  • 28
  • 121
  • 147
Drake Guan
  • 12,774
  • 11
  • 52
  • 92

1 Answers1

14

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 :-(.

David Barker
  • 13,767
  • 3
  • 40
  • 73
  • Thanks for this detailed explanation. Then, I should google some manual CSS way to do `pull-down` right? If I can make the parent element `position:relative`, what possible solutions I can use to create my own `pull-down`? – Drake Guan Sep 06 '13 at 01:30
  • 1
    well in your example, give the container and the ul a position:relative. You would then need to play around with `bottom` and `top` properties. creating a pull-down class is not going to be possible. The values of top and bottom will change in each case. – David Barker Sep 06 '13 at 09:33