爲什麼我的引導程序導航欄不內嵌排列？

這是我使用HTML引導（我敢肯定，引導正確安裝）爲什麼我的引導程序導航欄不內嵌排列？

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 

     <div class="navbar-header"> 
      <a class="navbar-brand">Rebar</a> 
     </div> 

     <div> 
      <ul class="nav navbar-nav"> 
       <li><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
      </ul> 
     </div> 
    </div> 
</nav>

當它顯示三個環節都被顯示爲塊元素。

來源

2015-05-21 Nash

這是因爲在引導鋰的CSS是這樣的：

.nav>li { 
    position: relative; 
    display: block; 
}

但對我來說，菜單似乎正確顯示。請參閱片段，但只能在整頁上看到。在移動設備上，它將表現得像塊元素，因爲屏幕沒有空間顯示它們內聯。

編輯：更新了的這段的要求（見這個答案下面的評論）

.navbar .container-fluid>.navbar-header { 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 
.navbar .navbar-nav { 
 
    float: left; 
 
    margin: 5px; 
 
} 
 
.nav>li { 
 
    float: left; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 

 
    <div class="navbar-header"> 
 
     <a class="navbar-brand">Rebar</a> 
 
    </div> 
 

 
    <div style="display: inline-block;"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

來源

2015-05-21 05:15:06

我在移動一直在測試......所以我想這就是問題。有沒有辦法強制它在手機上顯示內聯？ – Nash

你可以編寫CSS媒體查詢來改變它在不同尺寸和屏幕上的外觀。 – Ekin

@nash我更新了我的帖子中的例子與一些CSS更改的媒體查詢。可能不是完全做到這一點的最好方式，但它應該讓你走上正路。 –

工作，如果你想要像這樣check this DEMO

<nav class="navbar navbar-default navbar-static-top" id="topnavbar"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top_navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div id="top_navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li> 
        <a href="#">Link 1</a> 
       </li> 
       <li> 
        <a href="#">Link 2</a> 
       </li> 
       <li> 
        <a href="#">Link 3</a> 
       </li> 

      </ul> 

     </div> 
    </div> 
</nav>

來源

2015-05-21 05:33:56 sheshadri

我並不是說其他答案在任何方面都是不正確的，但所有這一切都是重要的盟友需要完成原來的問題是這樣的條目次主題的CSS文件：

.nav.navbar-nav li { 
    float: left; 
}

應該指出的是，李前級（S）將取決於在主題和其他的外觀部分的選擇而不同因素。例如，開箱的階級本來.menu.nav李

來源

2016-04-25 22:57:31 RickP

您可以內嵌navbar容易與此自定義CSS類：

的CSS：

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

現在用它在你的HTML：

..... 
<ul class="nav navbar-nav inline-navbar"> 
    ...... 
</ul> 
.....

來源

2017-02-02 04:03:51 RAM

當前處於Bootstrap 4.我的生態系統中默認情況下，flex佈局似乎也是列狀的。

這個用例的最直接的控制裝置：

.navbar-nav { 
    flex-direction: row; 
}

來源

2017-08-09 20:20:30 beauXjames

我面臨同樣的問題。試試這個：

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

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

它爲我

來源

2017-09-04 06:38:24

爲什麼我的引導程序導航欄不內嵌排列？

回答

相關問題