Bootstrap - Navbar正在扩展

Question

我有 Bootstrap Navbar ，其中包含很多标签。 Bootstrap 导航栏看起来 like this. 有没有办法阻止它。

HTML代码：

<link rel="stylesheet" href="CDNs/bootstrap.css">
 <nav class="navbar navbar-inverse">
    <div class="container-fluid">
 <div class="navbar-header">
    <a class="navbar-brand" href="#">v1.0</a>
 </div>
    <ul class="nav navbar-nav">
       <li style="float:right"><a href="#">Upload</a></li>
       <li style="float:right"><a href="#">Events of &copy;</a></li>
       <li style="float:right"><a href="#">Tracker</a></li>
       <li style="float:right"><a href="#"><span class="glyphicon glyphicon-pencil"></span> Return</a></li>
       <li style="float:right"><a href="#"><span class="glyphicon glyphicon-inbox"></span> My< /a></li> 
       <li style="float:right"><a href="signout.php"><span class="glyphicon glyphicon-user"></span> SignOut</a></li>
    <li style="float:right"><a class="navbar-brand" href="#"><?php
          echo "Logged in as " . $_SESSION["username"] . "<br>";
          ?></a></li>
    </ul>
  </div>
</nav>

*由于安全问题，我屏蔽了一些标签名称并编辑了代码中的标签名称*

谢谢，

Answer 1

 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

如果您需要的是将它们全部放在一行中，this小提琴应该可以正常工作。

这些是唯一需要的属性：

.nav.navbar-nav {
  display: inline-block;
  float: right;
}

ul.nav.navbar-nav > li {
  display: inline-block;
}

这是图片：

您可以看到所有标签都是有序的（signOut标签看起来像那样，因为它上面有一个锚标签）。

Answer 3

标记中存在少量错误

1）您的＆＃34;我的＆＃34;中的结束< /a>标记上有一个额外的空格选项

<li style="float:right"><a href="#"><span class="glyphicon glyphicon-inbox"></span> My< /a></li> 

删除它。

2）接下来删除所有内联样式（float:right;）。如果您想将所有内容向右移，那么只需将navbar-right课程添加到您的<ul>，就像这样

<ul class="nav navbar-nav navbar-right">
  <li></li>
  <li></li>
  <li></li>
</ul>

Codepen here