0

我正在尝试将文本添加到 Twitter Bootstrap 中的顶部固定导航栏，但由于某种原因，文本与链接不在同一行，wchich 使导航栏的高度达到应有的两倍。

这就是我正在使用的代码：

<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 对齐？

4

2 回答 2

5

这是你的想法吗？

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>
于 2012-09-05T03:38:03.697 回答
2

使用.pull-left或.pull-right。导航栏上的元素必须是浮动的，这些是相应的原生类。

于 2012-09-05T08:43:56.060 回答