更改hootstrap navbar倒塌断点，而无需使用更少的

StackOverflow https://stackoverflow.com/questions/19827605

题

当前，当浏览器宽度下降到768px以下时，Navbar会更改为折叠模式。我想将此宽度更改为1000px，因此当浏览器低于1000px时，Navbar更改为折叠模式。我想在不使用少的情况下这样做，我使用的是手写笔。

我的问题与这个问题相同： Bootstrap 3 Navbar崩溃

但是，该问题中的所有答案通过更改变量较小来解释如何做到这一点。我没有少处理，我正在使用手写笔，所以我想知道如何使用手写笔或其他方法完成这项工作。

谢谢！

有帮助吗？

解决方案 2

你必须写一个特定的 媒体查询 为此，从您的问题（低于768px）中，Navbar将崩溃，因此将其应用于768px和1000px以下，就像这样：

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

这将隐藏Navbar崩溃，直到引导单元的默认发生。随着崩溃类的翻转，内部资产将自动隐藏，就像明智的那样，您必须按照所需的设计设置CSS。

其他提示

2018更新

引导4

在Bootstrap 4中，更容易更改Navbar断点 navbar-expand-* 课程：

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

  • navbar-expand-sm = XS屏幕上的移动菜单<576px
  • navbar-expand-md = SM屏幕上的移动菜单<768px
  • navbar-expand-lg = MD屏幕上的移动菜单<992px
  • navbar-expand-xl = LG屏幕上的移动菜单<1200px
  • navbar-expand =切勿使用移动菜单
  • (no expand class) =始终使用移动菜单

如果您排除在外 navbar-expand-* 移动菜单将在 all 宽度。这是所有6个Navbar国家的演示： Bootstrap 4 Navbar示例

您还可以通过添加一些CSS来使用自定义断点（??? PX）。例如，这是1300px。

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-custom .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom > .container {
        flex-wrap: nowrap;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
        flex-basis: auto;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

引导4 风俗 NAVBAR断点
Bootstrap 4 Navbar断点示例

** bootstrap 3 **

对于Bootstrap 3.3.x，这是 在职的 CSS覆盖Navbar断点。改变 991px 到您要纳维栏崩溃的点的像素尺寸...

@media (max-width: 991px) {
  .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);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!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;
  }
  .collapse.in{
      display:block !important;
  }
}

991px的工作示例： http://www.bootply.com/j7xjuae5v6
1200px的工作示例： https://www.codeply.com/go/vsyaolzfb4 （带有搜索表格）

注意：以上对任何事物都有作用 超过768px. 。如果您需要将其更改为 小于768px 这 小于768px的示例在这里.

在 Bootstrap3, ，更改此变量 @网格流畅的断点 到您需要的那个。默认值为768px

终于解决了如何通过摆弄``@grid-float-breakpoint''来改变崩溃宽度的 http://getbootstrap.com/customize/.

转到Bootstrap.css（也是最低版本）中的第2923行，然后更改 @media screen and (min-width: 768px) { 至 @media screen and (min-width: 1000px) {

因此，代码最终将成为：

@media screen and (min-width: 1000px) {
  .navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
  }
  .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none;
  }
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

我只是通过使用以下CSS代码成功地做到了这一点。

@media(max-width:1000px)  {

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

    .collapse.in {
      display: block !important;
    }

}

在Bootstrap 3中。 源代码, ，在 variables.less 叫 @grid-float-breakpoint 有以下有用的评论：

//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;

匹配 @grid-float-breakpoint-max 值设置为负1PX：

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

解决方案：

因此，只需设置 @grid-float-breakpoint 价值为1000px并重建 bootstrap.less 进入 bootstrap.css:

例如

@grid-float-breakpoint: 1000px;

更改引导变量的SASS方法实际上是在 bootstrap-sass GitHub页面。

只需在您@Import Bootstrap之前重新定义变量：

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

除@skely回答外，还要做 下拉菜单 在Navbar的工作中，还可以添加他们的课程以使其成为Overriden。最终代码bellow：

    @media (min-width: 768px) and (max-width: 991px) {
        .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 {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .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;*/
            margin: 7.5px 50px 7.5px -15px
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .navbar-text {
            float: none;
            margin: 15px 0;
        }
        /* since 3.1.0 */
        .navbar-collapse.collapse.in { 
            display: block!important;
        }
        .collapsing {
            overflow: hidden!important;
        }
    }

演示代码

Navbars可以利用.navbar-toggler，.navbar-Collapse和.navbar-Expand {-sm | -md | -md | -lg | -xl}类，当它们的内容倒在按钮后面时，将更改。结合其他公用事业，您可以轻松选择何时显示或隐藏特定元素。

对于永不崩溃的纳维尔（Navbars），请在Navbar上添加.navbar-expand类。对于总是崩溃的纳维尔，请勿添加任何.navbar-expand类。

例如 ：

<nav class="navbar navbar-expand-lg"></nav>

移动菜单正在大屏幕中显示。

参考 ：https://getbootstrap.com/docs/4.0/components/navbar/

在Bootstrap V4中，可以使用不同的CSS类迟早倒闭导航

例如：

  • Navbar-Togglable-SM
  • Navbar-togglable-md
  • Navbar-togglable-LG

带有导航的按钮：

  • 隐藏式SM
  • 隐藏的md
  • 隐藏

这对我有用Bootstrap3

@media (min-width: 768px) {
    .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-collapse.collapse.in {
          display: block!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;
      }
}

花了一段时间才弄清楚这两个：

.navbar-collapse.collapse {
   display: none!important;
}
.navbar-collapse.collapse.in {
   display: block!important;
}

对于Bootstrap 3.3，这是您唯一需要的代码：

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}

最好的选择是使用您使用的CSS处理器的端口。

我是Sass的忠实粉丝，所以我目前使用 https://github.com/thomas-mcdonald/bootstrap-sass

看来这里有一个手写笔的叉子： https://github.com/acquisio/bootstrap-stylus

否则，搜索和替换是您在CSS版本中最好的朋友...

嗨，我想您可以使用这样的CSS进行操作，您可以更改Breakpoint Bootstrap菜单 

    @media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .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;
    }
   .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;
    }
}

这是我的工作代码。 （还可以下拉磁带链接起作用）

@media (max-width: 1199px) {
  .navbar-nav {
    margin: 7.5px -15px;
 }
  .ul-links {
    display: block;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
  }  
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }

  .navbar-collapse.collapse {
      display: none!important;
      max-height: none;
  }
  .navbar-nav {
      float: none!important; 
  }
  .navbar-nav>li {
      float: none;
  } 
  .collapse.in{
      display:block !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;
  }
}

这就是我的诀窍：

@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}

在Bootstrap 4中，如果您想在Navbar-Expand-*时过度骑行，请扩展和折叠和显示并隐藏汉堡包（Navbar-toggler），您必须在Bootstrap.css中找到该样式/定义，并将其重新定义在您的中拥有CustomStyle.css（如果您如此倾向，则直接在Bootstrap.css中）。

例如。我希望Navbar-Expand-LG倒塌，并以950px显示Navbar-Toggler。在Bootstrap.css中，我发现：

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

在那之下... 

@media (min-width:992px) { 
    ... lots of styling ...
}

我复制了@Media查询并以我的style.css粘贴，然后修改了尺寸以适合我的需求。我的案子我希望它以950px崩溃。 @Media查询必须需要不同的尺寸（我猜），因此我将最大宽度设置为949.98px，并将950px用于其他@Media Query，因此以下代码已将其附加到我的style.css.css.css.css.css。这并不容易从我在Stackoverflow和其他地方发现的扭曲解决方案中弄出。希望这可以帮助。

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}

在这里，我的工作代码使用bootstrap中的React In React

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<style>
  @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
  </style>

现在在Bootstrap 4.4上支持它

navbar-expand-sm
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top