Question

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

Answer 1

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

请参阅下面给出的代码片段

Jquery库

bootstrap.js和

bootstrap.css

工作正常。请参阅以下代码段

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

Answer 2

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

Answer 3

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

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

navbar-right不在列表中

3 个答案: