Text in Twitter Bootstrap navbar

问题:

I'm trying to add text to top fixed navbar in Twitter Bootstrap but in some reason text is not on the same line with link wchich makes navbar twice as much hight as it should be.

That's the code I'm using:

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <p class="navbar-text" >You are logged in as: <? echo $_SESSION['settings_users_name']; ?></p>
      <ul class="nav pull-right">
        <li><a href="?action=logout">Logout</a></li>
      </ul>
    </div>
  </div>
</div>

If I outline "Block Level Elements" in Web Developer toolbar than I see that <p> has 100% lenght of the navbar which push the <ul> below.

How to align text with ul?

回答1:

Is this what you had in mind?

http://jsbin.com/uvonej/2

http://jsbin.com/uvonej/2/edit

This .jsbin example builds off of the .brand class you can find when you inspect the the bootstrap documentation for the .navbar component.

css

    <style type="text/css">
    /* see the .brand styling in bootstrap .css */
    .login-blurb {
      display: block;
      float: left;
      padding: 10px 20px 10px;
      margin-left: -20px;   
      color: #e7e7e7;
    }
  </style>

html

 <div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <span class="login-blurb">You are logged in as: <strong>username<strong></span>
      <ul class="nav pull-right">
        <li><a href="#action=logout">Logout</a></li>
      </ul>
    </div>
  </div>
</div>

回答2:

Use .pull-left or .pull-right. Elements on a navbar must be floating and these are the corresponding native classes.