保持Bootstrap 3.3.x导航栏折叠在所有视口大小 [英] Keep Bootstrap 3.3.x navbar collapsed at all viewport sizes

问题描述

有任何方法增加，以确保bootstrap 3 navbar永远不会崩溃，以便桌面版本看起来类似于手机版本。

 <！ - 移动友好的导航栏从示例改编。 - > 
<！ -  http://twitter.github.io/bootstrap/examples/starter-template.html  - > 
< div class =navbar navbar-inverse navbar-fixed-top> 
< div class =navbar-inner> 
< div class =container> 
< button type =buttonclass =btn btn-navbar
 data-toggle =collapsedata-target =nav-collapse> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
<！ - < a class =brandhref =＃> Bitstarter< / a> - > 
< form class =navbar-form navbar-header> 
< input type =textclass =form-controlplaceholder =...> 
< / form> 
< div class =nav-collapse collapse> 
< ul class =nav> 
< li class =active>< a href =＃>首页< / a>< / li& 
< li>< a href =＃about>关于< / a>< / li& 
< li>< a href =＃contact>联系人< / a>< / li> 
< / ul> 
< / div><！ -  /。nav-collapse  - > 
< / div> 
< / div> 
< / div> 
  

基于 Bootstrap 3 Navbar Collapse 我试着使用下面的代码将最大宽度增加到9000px，但它仍然会随着桌面大小的增加而扩展。

  / *大型桌面* / 
 @media（max-width：9000px）{
 .navbar-header {
 float：none; 
} 
 .navbar-toggle {
 display：block; 
} 
 .navbar-collapse {
 border-top：1px solid transparent; 
 box-shadow：inset 0 1px 0 rgba（255,255,255,0.1）; 
} 
 .navbar-collapse.collapse {
 display：none！important; 
} 
 .navbar-nav {
 float：none！important; 
 margin：7.5px -15px; 
} 
 .navbar-nav> li {
 float：none; 
} 
 .navbar-nav> li> a {
 padding-top：10px; 
 padding-bottom：10px; 
} 
 / *从3.1.0开始* / 
 .navbar-collapse.collapse.in {
 display：block！important; 
} 
 .collapsing {
 overflow：hidden！important; 
} 
  

解决方案

在767px，菜单断点是768px，让我们从unpackered Bootstrap CSS中复制样式，并使用相同或更大的specifity - 如果可能，他们使用一个！important（bummer） - 和把CSS

$ b

HTML：根据GetBootstrap.com上的示例准确实现navbar构建
$ b

在Bootstrap中没有这样的类 .navbar-inner 3.查看迁移指南（ http://getbootstrap.com/migration/ ）和GetBootstrap.com上的示例

演示： https://jsbin.com/qorigo/1

CSS：

  body {padding-top：70px} 
 
 @media min-width：768px）{
 .navbar-header {float：none} 
 .navbar-left，
 .navbar-right {float：none！important} 
 .navbar -toggle {display：block} 
 .navbar-collapse {
 border-top：1px solid transparent; 
 box-shadow：inset 0 1px 0 rgba（255,255,255,0.1）; 
 overflow：hidden; 
} 
 .navbar-fixed-top {
 top：0; 
 border-width：0 0 1px; 
} 
 .navbar-collapse.collapse {
 display：none！important; 
 visibility：hidden！important; 
 height：0px！important; 
} 
 .navbar-nav {
 float：none！important; 
 margin-top：7.5px; 
} 
 .navbar-nav> li {float：none} 
 .navbar-nav> li> a {
 padding-top：10px; 
 padding-bottom：10px; 
} 
 .navbar-collapse.in {
 -webkit-transition-timing-function：ease; 
 -o-transition-timing-function：ease; 
 transition-timing-function：ease; 
 -webkit-transition-duration：.35s; 
 -o-transition-duration：。35s; 
 transition-duration：.35s; 
 -webkit-transition-property：height，visibility; 
 -o-transition-property：height，visibility; 
 transition-property：height，visibility; 
 display：block！important; 
 height：auto！important; 
 padding-bottom：0; 
 overflow：visible！important; 
 visibility：visible！important; 
} 
 .navbar-nav .open .dropdown-menu {
 position：static; 
 float：none; 
 width：auto; 
 margin-top：0; 
 background-color：transparent; 
 border：0; 
 -webkit-box-shadow：none; 
 box-shadow：none; 
} 
 .navbar-nav .open .dropdown-menu> li> a，
 .navbar-nav .open .dropdown-menu .dropdown-header {padding：5px 15px 5px 25px} 
 .navbar-nav .open .dropdown-menu> li> a {line-height：20px} 
 .navbar-nav .open .dropdown-menu> li> a：hover，
 .navbar-nav .open .dropdown-menu> li> a：focus {background-image：none} 
 .navbar-default .navbar-nav .open .dropdown-menu> li> a {color：＃777} 
 .navbar-default .navbar-nav .open .dropdown-menu> li> a：hover，
 .navbar-default .navbar-nav .open .dropdown-menu> li> a：focus {
 color：＃333; 
 background-color：transparent; 
} 
 .navbar-default .navbar-nav .open .dropdown-menu> .active> a，
 .navbar-default .navbar-nav .open .dropdown-menu> .active> a：hover，
 .navbar-default .navbar-nav .open .dropdown-menu> .active> a：focus {
 color：＃555; 
 background-color：＃e7e7e7; 
} 
 .navbar-default .navbar-nav .open .dropdown-menu> .disabled> a，
 .navbar-default .navbar-nav .open .dropdown-menu> .disabled> a：hover，
 .navbar-default .navbar-nav .open .dropdown-menu> .disabled> a：focus {
 color：#ccc; 
 background-color：transparent; 
} 
 .navbar-inverse .navbar-nav .open .dropdown-menu> .dropdown-header {border-color：＃080808} 
 .navbar-inverse .navbar-nav .open .dropdown-menu .divider {background-color：＃080808} 
 .navbar-inverse .navbar -nav .open .dropdown-menu> li> a {color：＃9d9d9d} 
 .navbar-inverse .navbar-nav .open .dropdown-menu> li> a：hover，
 .navbar-inverse .navbar-nav .open .dropdown-menu> li> a：focus {
 color：#fff; 
 background-color：transparent; 
} 
 .navbar-inverse .navbar-nav .open .dropdown-menu> .active> a，
 .navbar-inverse .navbar-nav .open .dropdown-menu> .active> a：hover，
 .navbar-inverse .navbar-nav .open .dropdown-menu> .active> a：focus {
 color：#fff; 
 background-color：＃080808; 
} 
 .navbar-inverse .navbar-nav .open .dropdown-menu> .disabled> a，
 .navbar-inverse .navbar-nav .open .dropdown-menu> .disabled> a：hover，
 .navbar-inverse .navbar-nav .open .dropdown-menu> .disabled> a：focus {
 color：＃444; 
 background-color：transparent; 
} 
} 
  

Is there any way to increase to ensure that bootstrap 3 navbar never collapses so that the desktop version looks similar to the mobile version.

<!-- Mobile-friendly navbar adapted from example. -->
<!-- http://twitter.github.io/bootstrap/examples/starter-template.html -->
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button type="button" class="btn btn-navbar"
              data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- <a class="brand" href="#">Bitstarter</a> -->
      <form class="navbar-form navbar-header">
        <input type="text" class="form-control" placeholder="... ">
      </form>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

Based on Bootstrap 3 Navbar Collapse I tried using the following code increasing the max-width to 9000px, but it still expands as the desktop size increases.

/* Large desktop */
@media (max-width: 9000px) {
.navbar-header {
    float: none;
} 
.navbar-toggle {
    display: block;
}    
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}  
.navbar-collapse.collapse {
    display: none!important;
}  
.navbar-nav {
    float: none!important;
    margin: 7.5px -15px;
}
.navbar-nav>li {
    float: none;
}   
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
    display: block!important;
}
.collapsing {
    overflow: hidden!important;
}

解决方案

Since the small viewport navigation ends at 767px and the menu breakpoint is 768px, let's copy the styles out of the un-packed Bootstrap CSS and use the same or greater specifity -- if possible, they use a good bit of !important (bummer) -- and put the CSS in a min-width.

HTML: Use accurate implementation of navbar construction as per the examples on GetBootstrap.com

There is no such class .navbar-inner in Bootstrap 3. Look at the migration guide (http://getbootstrap.com/migration/) and the examples on GetBootstrap.com

DEMO: https://jsbin.com/qorigo/1

CSS:

body { padding-top: 70px }

@media (min-width:768px) { 
    .navbar-header { float: none }
    .navbar-left,
    .navbar-right { float: none !important }
    .navbar-toggle { display: block }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        overflow: hidden;
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
        visibility: hidden!important;
        height: 0px!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li { float: none }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-collapse.in {
        -webkit-transition-timing-function: ease;
        -o-transition-timing-function: ease;
        transition-timing-function: ease;
        -webkit-transition-duration: .35s;
        -o-transition-duration: .35s;
        transition-duration: .35s;
        -webkit-transition-property: height, visibility;
        -o-transition-property: height, visibility;
        transition-property: height, visibility;
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
        visibility: visible !important;
    }
    .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .navbar-nav .open .dropdown-menu > li > a,
    .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px }
    .navbar-nav .open .dropdown-menu > li > a { line-height: 20px }
    .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-nav .open .dropdown-menu > li > a:focus { background-image: none }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #777 }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #333;
        background-color: transparent;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #555;
        background-color: #e7e7e7;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #ccc;
        background-color: transparent;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header { border-color: #080808 }
    .navbar-inverse .navbar-nav .open .dropdown-menu .divider { background-color: #080808 }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: #9d9d9d }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #fff;
        background-color: transparent;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #fff;
        background-color: #080808;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #444;
        background-color: transparent;
    }
}

这篇关于保持Bootstrap 3.3.x导航栏折叠在所有视口大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！