0

Twitter Bootstrap の上部固定ナビゲーション バーにテキストを追加しようとしていますが、何らかの理由でテキストがリンクと同じ行にないため、ナビゲーション バーが必要な高さの 2 倍になります。

それは私が使用しているコードです:

<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 開発者ツールバーで「ブロック レベル要素」<p>のアウトラインを作成すると、下を押すナビゲーション バーの長さが 100% であることがわかり<ul>ます。

テキストをulに揃えるには?

4

2 に答える 2

5

これはあなたが考えていたことですか？

http://jsbin.com/uvonej/2

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

この .jsbin の例は、 .navbarコンポーネント.brandのブートストラップ ドキュメントを調べたときに見つかるクラスから構築されています。

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ます。navbar の要素はフローティングである必要があり、これらは対応するネイティブ クラスです。

于 2012-09-05T08:43:56.060 に答える