Twitter Bootstrap 导航栏中的文本答案

【问题标题】：Text in Twitter Bootstrap navbarTwitter Bootstrap 导航栏中的文本
【发布时间】：2012-09-04 20:11:15
【问题描述】：

我正在尝试将文本添加到 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 对齐？

【问题讨论】：

标签： twitter-bootstrap navbar

【解决方案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>

【讨论】：

是的，我知道如何构建新课程。我只是认为必须有某种方法可以在 Bootstrap 中使用现有类。谢谢

【解决方案2】：

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

【讨论】：