如何使Bootstrap導航欄「無響應」？

我正在使用Bootstrap來設計一個網頁。因爲我使用的是Bootstrap Navbars，但是我不希望它們響應。我試圖更改variables.less文件，將.container { width: @container-desktop !important; }添加到我的css文件，但目前爲止還沒有工作。我的代碼如下：如何使Bootstrap導航欄「無響應」？

<div class="navbar-custom navbar-default navbar-fixed-top"> 
    <div style="width: 95%; margin:0 auto;" > 
    <div class="container-fluid"> 
     <a class="navbar-brand" href="http://someURL/"><img src="images/someImage"></a> 
     <div> 
     <ul class="nav navbar-nav myCustomClass1"> 
       <li><span class="name">Welcome Mr Blah, Blah </span></li> 
       <li><span class="logo1">someStuff</span></li> 
       </ul> 
      </div> 
     </div> 
</div> 
</div> 

<nav class="navbar navbar-inverse navbar-fixed-top test"> 

    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span>       
     </button> 

    </div> 

    <div class="collapse navbar-collapse" id="myNavbar"> 
    <div style="width: 95%; margin:0 auto;" > 
    <ul class="nav navbar-nav align-nav-items"> 
     <li ng-class="{active: someThing}"><a href="#/somePage">aaa</a></li> 
     <li><a href="#/otherPage">bbb</a></li> 
     <li ng-class="{active: someThing}"><a href="#/anotherPage">ccc</a></li> 
     <li><a href="#/otherURL">ddd</a></li> 
     <li><a href="#/anotherURL">eee</a></li> 
     <li><a href="#/someURL">fff</a></li> 
     <li><a href="#/someOtherURL">ggg</a></li> 
    </ul> 
    <ul class="nav navbar-nav myCustomClass2"> 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span>xxx</a></li> 
    </ul> 
    <div> 
    </div> 
    </div> 
</nav>

請原諒稍有缺陷的縮進。自定義CSS類是：

.myCustomClass1 
{ 
    float: right; 
    margin:0 auto; 
    margin-top:1.5%; 

} 

.myCustomClass2 { 
    float: right; 
margin:0 auto; 


}

有沒有什麼辦法可以讓我的代碼不響應？我基本上希望它做的是不是響應地改變設計，而是希望它能夠修剪成古老的方式並使頁面水平滾動。

來源

2015-12-11 theHeman

以像素爲單位，而不是百分比定義一個固定的寬度。 –

@BhojendraNepal究竟在哪裏？ – theHeman

爲了清楚起見，您希望只有導航欄不具有任何責任性，同時保持所有其他元素的響應權？ – AVAVT

您不要在標記要這樣：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span>       
</button>

也改變

<div class="collapse navbar-collapse" id="myNavbar">

到

<div id="myNavbar">

更改CSS爲.nav > li和.nav > li > a。默認情況下兩者應該是display: block（Bootstrap）。將它們更改爲display: inline。根據您的需要調整其餘部分。

編輯根據用戶的jsfiddle：

這是你想要的？ JSFiddle

我說：

.navbar-inverse { 
    /* other styles */ 
    height: auto; 
    overflow-x: auto; 
} 
.align-nav-items { 
    min-width: 390px; 
} 
.nav > li, .nav > li > a { 
    display: inline; 
}

來源

2015-12-11 05:58:14 musafar006

會測試並讓你知道！ – theHeman

不工作先生！雖然Hamburger菜單不再出現，但我只能看到aaa標籤和xxx標籤，而其他所有其他標籤都沒有顯示。 – theHeman

@ashhem檢查更新後的答案。 – musafar006

爲了使導航欄不響應和所有其他保持響應只是做到以下幾點：

.navbar.navbar-inverse.navbar-fixed-top.test{ 
    min-width: 1200px;/*define as you require*/ 
}

來源

2015-12-11 06:01:56

試一試.. – theHeman

試過了，這是做什麼的，而不是給我滾動條，它痙攣了我的導航欄上方的所有標籤。 – theHeman

如何使Bootstrap導航欄「無響應」？

回答

相關問題