Twitter Bootstrap导航栏中的文本

Question

我正在尝试将文本添加到Twitter Bootstrap中的顶部固定导航栏,但由于某些原因,文本与链接不在同一行上,导致导航栏的高度应该是应有的两倍.

那是我正在使用的代码:

<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>

如果我在Web Developer工具栏中勾勒出"块级元素",那么我看到它<p>的导航栏长度为100%,而<ul>下方则是这样.

如何将文字与ul对齐？

Answer 1

这是你的想法吗？

http://jsbin.com/uvonej/2

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

这个.jsbin示例构建了.brand在检查.navbar组件的引导文档时可以找到的类.

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>