navbar-right 不适用于列表答案

【问题标题】：navbar-right is not working on listnavbar-right 不适用于列表
【发布时间】：2016-07-15 14:20:38
【问题描述】：

我是 bootstrap 新手，在我的应用程序中，我希望在页面顶部有一个 navbar。 navbar 应该包含品牌名称，然后在它的右侧应该有一些选项。但是每当我使用navbar-right 时，它都不起作用，我得到的页面看起来像this

如您所见，所有内容都与左侧的品牌名称一起压缩。我试图通过使用pull-right 来解决这个问题，它确实工作得很好，但我想知道为什么navbar-right 不是。

homeTemplate.html

<body>
<nav class="navbar navbar-default">
    <div class="navbar-inner">
       <div class="container-fluid"> 
           <div class="navbar-header">
               <a href="#" class="navbar-brand">MyApp</a>
           </div> 
           <ul class="nav navbar-nav navbar-right">
               <li><a href="#">Profile</a></li>
               <li><a href="#">Notifications</a></li>
               <li><a href="#">Messages</a></li>
               <li><a href="#">Options</a></li>
           </ul>
       </div>
   </div>
</nav>
</body>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

我想你可能错过了一些图书馆。

见下面我添加的sn-p

jQuery 库

bootstrap.js 和

bootstrap.css

它工作正常。看下面的sn-p

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
    <div class="navbar-inner">
       <div class="container-fluid"> 
           <div class="navbar-header">
               <a href="#" class="navbar-brand">MyApp</a>
           </div> 
           <ul class="nav navbar-nav navbar-right">
               <li><a href="#">Profile</a></li>
               <li><a href="#">Notifications</a></li>
               <li><a href="#">Messages</a></li>
               <li><a href="#">Options</a></li>
           </ul>
       </div>
   </div>
</nav>

【讨论】：

只是对 bootstrap 4 用户的提醒，推荐的类是
是的，如果有人使用 BOOTSTRAP 4，那么他们可以使用@StephenRomero 提供的上述解决方案。我添加的代码适用于使用 BOOTSTRAP 3 的人。
@StephenRomero 你应该让你的评论成为答案，我几乎监督了它。但效果很好:)
您的代码 nav navbar-nav navbar-right 来自 ul 正是我在从 BS3 迁移时将导航栏移到 BS-4 右侧所需的代码

【解决方案2】：

可能存在版本问题。对于 Bootstrap 版本 4，使用 <ul class="nav navbar-nav ml-auto"> 将元素向右移动。

【讨论】：

【解决方案3】：

尝试使用两个无序列表，一个用于导航品牌，您需要左对齐的元素，然后使用单独的无序列表使用 "nav navbar-nav navbar-right" 类来获得正确对齐的元素。检查下面的 sn-p。

   <nav class="navbar navbar-default navbar-static-top">
        <div class="topnav">
            <ul class = "nav navbar-nav">
                <li><a class="navbar-brand bigbrand" href="{% url 'urls' %}">BRAND name</a></li>       
                <li><a class="navbar-link" href="{% url 'urls' %}">Home</a></li>
                <li><a class = "navbar-link" href="urls">News</a></li>
                <li><a class = "navbar-link" href="urls">Contact</a></li>
                <li><a class = "navbar-link" href="{% url 'urls' %}">test</a></li>
            </ul>
            <ul class = "nav navbar-nav navbar-right">
                <li><a href="{% url 'url:logout' %}">logout</a></li>
            </ul>
       </div>
</nav>

【讨论】：