Текст в Twitter Bootstrap панели навигации

голоса
0

Я пытаюсь добавить текст к началу неподвижной Navbar в Twitter Bootstrap, но в какой-то причине текст не на одной линии со связью wchich делает Navbar вдвое больше Hight, как это должно быть.

Вот код, я использую:

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

Если я очертить «Block Level Elements» в веб - панели инструментов разработчика , чем я вижу , что <p>есть 100% Длина навигационной панели , которые отжимают его <ul>ниже.

Как выровнять текст с ул?

Задан 04/09/2012 в 21:11
источник пользователем
На других языках...                            


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>
Ответил 05/09/2012 в 04:38
источник пользователем

голоса
2

Используйте .pull-leftили .pull-right. Элементы на навигационной панели должны быть плавающими и эти соответствующие родные классы.

Ответил 05/09/2012 в 09:43
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more