Question

对于网站的所有版本，有没有办法使用导航栏的折叠版本，无论大小如何？

一直在改变以下内容，但不确定这是否是最有效的方法：

    @media (min-width: 768px) {
    .navbar > .container .navbar-brand {
    margin-left: -15px;
    }
    }
    .navbar-toggle {
      position: relative;
      float: right;
      margin-right: 15px;
      padding: 9px 10px;
      margin-top: 8px;
      margin-bottom: 8px;
      background-color: transparent;
      background-image: none;
      border: 1px solid transparent;
      border-radius: 4px;
    }
    .navbar-toggle .icon-bar {
      display: block;
      width: 22px;
      height: 2px;
      border-radius: 1px;
    }
    .navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
    }

Answer 1

是的，只需将@grid-float-breakpoint Less变量（位于bootstrap/less/variables.less）设置为荒谬的高值（例如999999999px），然后重新编译Bootstrap。

Answer 2

CSS覆盖可以简化为：

.navbar-header {
  float: none;
}
.navbar-toggle {
  display: block;
}
.navbar-collapse.collapse {
  display: none!important;
}
.navbar-nav {
  float: none!important;
}
.navbar-nav>li {
  float: none;
}
.collapse.in{
  display:block !important;
}

http://www.bootply.com/nANH5ownG9

在Bootstrap3中使用折叠导航栏作为默认值

2 个答案: