Как сделать Bootstrap Navbar «невосприимчивым»?

Question

Я использую Bootstrap для создания веб-страницы. В этом я использую Bootstrap Navbars, но я не хочу, чтобы они были отзывчивыми. Я попытался внести изменения в variables.less файл, добавив .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"> 

Измените 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; 
} 

Answer 2

Для того, чтобы Navbar не реагируют и все другие держать реагировать только сделать следующее:

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