Question

我正在使用Bootstrap来设计网页。因为我使用的是Bootstrap Navbars，但我并不希望它们具有响应能力。我尝试更改 variables.less 文件，将NSString *user = [textUser text]; NSString *password = [textPassword text]; [[NSUserDefaults standardUserDefaults] setObject:user forKey:@"userName"]; [[NSUserDefaults standardUserDefaults] setObject:password forKey:@"userPassword"]; [[NSUserDefaults standardUserDefaults] synchronize];//here is where i save the user info but i want it to stay even if the app is killed添加到我的css文件中，但到目前为止还没有。我的代码如下：

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

有什么办法可以让这些代码无响应吗？我本质上希望它做的不是响应性地改变设计，而是希望它以旧的方式修剪并使页面可以水平滚动。

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（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-inverse.navbar-fixed-top.test{
   min-width: 1200px;/*define as you require*/
}

如何制作Bootstrap Navbar＆＃34;无响应＆＃34;？

2 个答案: