如何使Bootstrap Navbar“無響應”？

Question

我正在使用Bootstrap設計網頁。 因為我正在使用Bootstrap Navbars，但我不希望它們響應。 我試圖對variables.less文件進行更改，添加.container { width: @container-desktop !important; } .container { width: @container-desktop !important; }到我的css文件，但到目前為止沒有任何工作。 我的代碼如下：

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


}

有什么方法可以使此類代碼無響應？ 我本質上希望它做的是代替響應式地更改設計，我希望它被剪裁成老式的好方法並使頁面水平滾動。

Answer 1

您不希望在標記中使用以下代碼：

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

將.nav > li和.nav > li > a更改為css。 兩者均應display: block默認情況下處於display: block （引導程序）。 將它們更改為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;
}

Answer 2

要使導航欄不響應，而使所有其他響應保持響應，請執行以下操作：

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