如何使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导航栏“无响应”？

回答

相关问题