Twitter Bootstrap导航栏中的文本 [英] Text in Twitter Bootstrap navbar

问题描述

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

I'm trying to add text to top fixed navbar in Twitter Bootstrap but in some reason text is not on the same line with link wchich makes navbar twice as much hight as it should be.

那是我正在使用的代码:

That's the code I'm using:

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

If I outline "Block Level Elements" in Web Developer toolbar than I see that <p> has 100% lenght of the navbar which push the <ul> below.

如何将文本与ul对齐?

How to align text with ul?

推荐答案

这是您的初衷吗?

http://jsbin.com/uvonej/2

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

此.jsbin示例基于.brand类构建，您可以 在检查 .navbar 组件的引导程序文档时找到.

This .jsbin example builds off of the .brand class you can find when you inspect the the bootstrap documentation for the .navbar component.

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>

这篇关于Twitter Bootstrap导航栏中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！