Bootstrap：如何更早地折叠导航栏

Posted 2023-03-06

【中文标题】Bootstrap：如何更早地折叠导航栏

【英文标题】：Bootstrap: How to collapse navbar earlier

【发布时间】：2014-01-31 08:25:10

【问题描述】：

我想以早于 768 像素的分辨率折叠我的导航栏，例如 992 像素，我该怎么做？谢谢！ （我知道我可以在引导页面上自定义它，但我不想用新的 bootstrap.css 文件重新开始我的项目）

【问题讨论】：

这可能会有所帮助：***.com/questions/18896591/…

答案在这里：***.com/a/36289507/171456

【参考方案1】：

如果您不想通过使用 Less/Sass 来操作 Bootstrap（可能是因为您想通过 CDN 加载它），这就是我的诀窍：

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

演示：https://jsfiddle.net/0pmy8usr/

将此添加到单独的 CSS 文件中并在 bootstrap.css 之后包含它

Bootstrap 4 更新：

@media(max-width:900px) 
  .navbar .navbar-brand float:none;display: inline-block;
  .navbar .navbar-nav>.nav-item  float: none; margin-left: .1rem;
  .navbar .navbar-nav float:none !important;
  .nav-itemwidth:100%;text-align:left; 
  .navbar-toggler display: block !important;
  .navbar-toggleable-sm.collapse display:none !important
  .navbar-toggleable-sm.collapse.in display:block !important

演示：https://jsfiddle.net/mkvhbgnp/3/

【讨论】：

一个如何在另一个方向上执行此操作的示例会很有帮助。例如，您如何让它在 480 像素处中断？

在宽度小于等于 768px 之前不会显示汉堡菜单。所以在 768px 和 991px 之间不会有菜单。

你知道为什么在使用navbar-fixed-top的时候折叠时会出现一个x-scrollbar：jsfiddle.net/Lha14tm6

@theyuv：我在 Chrome 和 IE 中看不到任何水平滚动条

@Gerfried 正在崩溃。并将大小更改为有问题的大小（即：768 和 991 之间）。你必须让它更大一点。

【参考方案2】：

在variables.less，更改

@grid-float-breakpoint:   @screen-sm-min

到

@grid-float-breakpoint: @screen-md-min;  

【讨论】：

这对于我们在 Bootstrap 3.3.6 上构建的 2 列 / 导航栏应用程序页面实际上非常有效。

这会影响除导航之外的其他任何内容吗？

Lawyerson，不，它只是这样做而不影响其他任何东西，恕我直言，它很棒，因为它以非常干净的方式在一行代码中解决了问题。 :-)

【参考方案3】：

如果您需要以早于 768px 的分辨率折叠导航栏，那么您将需要使用 @media min-width 和 max-width，并且您无需为此启动新项目，只需创建新的 .css 文件（example: custom.css）并将其插入到您的 ma​​in bootstrap.css 下以覆盖其值。并在里面写下这段代码：

代码：

@media (min-width: 992px) 
   .collapse 
       display: none !important;
   

另外，你可以看看这个帖子：change bootstrap navbar collapse。

我希望这会给你解决方案。

【参考方案4】：

您还可以覆盖缩小差距的引导类。 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;
        
    

click here for the live demo code

【参考方案5】：

解决方案其实很简单。使用带有<nav> 标签的 .navbar-expand-lg 或 .navbar-expand-xl 类。

例子：-

<nav class="navbar navbar-expand-lg navbar-light" role="navigation">
</nav>

谢谢大家。

【参考方案6】：

我建议将引导程序引入您的项目以代替 CDN，并简单地查找如下所示的媒体查询：

@media (min-width: 768px) 
  .navbar-expand-md 
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap; //...etc.

并将其更改为：

@media (min-width: 900px) 
  .navbar-expand-md 
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap; // ...etc.

或者，如果您使用的是 CDN，请创建对该特定媒体查询的覆盖。

【参考方案7】：

如果您希望它是可从中等设备折叠的菜单

你可以直接通过

toggleable="md"

否则，您可以通过设置引导程序的 sccs/less 来采用其他可强制折叠的方法。

【讨论】：

请提供一个示例（在代码中），这将有助于向 OP 展示解决方案。谢谢！