防止從調整

引導導航欄我採取了以下引導導航欄...防止從調整

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Page 1-1</a></li> 
      <li><a href="#">Page 1-2</a></li> 
      <li><a href="#">Page 1-3</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
    </ul> 
    </div> 
</nav>

我有這個導航欄的問題是，當屏幕變得更小，導航欄改變它佈置

方式

大小調整之前...

調整大小後...

我如何防止引導從重新排列導航欄？我應該添加/刪除哪些屬性以確保總是看起來像第一張照片。溢出是允許的，我只需要確保它保持其形狀。

來源

2016-03-19 Bolboa

嗯，我不知道你的問題到底是什麼，但是我在使用'container-fluid'的bootstrap導航欄時遇到了問題，請嘗試只使用'container'類，看看會發生什麼。 –

@RodrigoAraújoValente我的問題是，我希望導航欄始終保持固定大小，即使窗口已調整大小。我嘗試將它更改爲'container'，但它繼續執行相同的操作 – Bolboa

您是否試圖將'container'中的導航欄包裝爲'div'作爲class？ –

我看着辦吧，我改變......

<ul class="nav navbar-nav">

...到正規的UL，而不是一個預先定義的引導，所以我把它改成...

<ul class="nav">

後，這是非常簡單的，我飄來每個ul離開，這樣他們將水平對齊。然後我把它們放在一個固定寬度的div裏面，以防止它們崩潰。

來源

2016-03-19 04:21:02 Bolboa

它不適合我。 –

打開你的調試工具，你可以看到有許多媒體查詢@media (min-width: 768px)樣式規則，這些規則時，屏幕寬度小於768px大才起作用。因此，當您調整屏幕大小時，導航欄樣式會發生變化。

如果你想保持風格上的所有屏幕尺寸只是修改這些媒體查詢，使這些樣式規則上的所有屏幕尺寸的工作。

來源

2016-03-19 02:29:32 theJian

回答

相關問題