14

您好我正在尝试在导航栏的右侧创建一个部分。我使用了 div 类 navbar-right 应该将 div 浮动到右侧，但我得到了一个新行。

请参阅下面的代码&谢谢！

 <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.php">xxx</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.php">Home</a></li>
            <li><a href="about.php">About</a></li>
            <li><a href="contact.php">Contact</a></li>
          </ul>
        </div>
      <div class="navbar-right">
      <p>
        <b> '.$username.' </b> | Access Level: '.$level.' | <a href=logout.php>Logout</a>
      </p> 


      </div>
    </div>
  </div>
4

2 回答 2

15

为了放置在导航栏的顶层，内容必须放在具有类的 div 内：navbar-header

因此，不要在 div 内声明注销链接：

<div class="navbar-right">

请改用以下类：

<div class="navbar-header pull-right">

由于您需要Brandto pull-left，因此您可以将两个navbar-headerdiv 并排放置在最顶部，并在每个方向上拉一个。像这样：

<div class="navbar-header pull-left">     
    <a class="navbar-brand" href="index.php">xxx</a>
</div>
<div class="navbar-header pull-right">
    <button type="button" class="navbar-toggle" 
            data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>

    <p class="navbar-text">
        <b> '.$username.' </b>
        <a href="logout.php" class="navbar-link">Logout</a>&nbsp;
    </p>  
</div>

jsFiddle

展开

展开

折叠

倒塌

更新：根据 Ram 的评论，为了不让下拉菜单在小屏幕上不重叠，您必须像这样清除左浮动：

.navbar-collapse.in,
.navbar-collapse.collapsing {
    clear: left;
}
于 2013-09-19T19:00:25.953 回答
1

代替，

<div class="navbar-right">
  <p>
    <b> '.$username.' </b> | Access Level: '.$level.' | <a href=logout.php>Logout</a>
  </p> 
</div>

利用，

<p class="pull-right">
    <b> '.$username.' </b> | Access Level: '.$level.' | <a href=logout.php>Logout</a>
</p>
于 2013-09-19T16:52:12.177 回答