Bootstrap: 如何提前折叠导航栏

Question

Bootstrap: 如何提前折叠导航栏

csstwitter-bootstrapnavbar

48

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

- Edward

这可能对你有帮助：https://dev59.com/13fZa4cB1Zd3GeqPMgd4 - user3806549

答案在这里：https://dev59.com/xmIj5IYBdhLWcg3w2odr#36289507 - Carol Skelly

7个回答

11

在variables.less中修改

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

为了

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

- barduro

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

1

除了导航以外，这会影响到其他任何东西吗？ - Lawyerson

律师们，它只是这样做而不影响其他任何东西，我认为它非常棒，因为它以一行非常干净的代码解决了问题。 :-) - barduro

7

如果您需要在比768像素更早的分辨率下折叠导航栏，那么您需要使用@media min-width和max-width，而且您不需要为此启动新项目，只需创建一个新的.css文件（例如：custom.css），并将其插入到您的主要bootstrap.css下以覆盖其值。然后在其中写入以下代码：

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

同时，你可以查看这篇文章：更改Bootstrap导航栏折叠点。

我希望这能够给你提供解决方案。

- AhmedBinNasser

4

您还可以覆盖关闭间隙的Bootstrap类。以下是可用于覆盖带有下拉菜单的基本导航栏的工作代码。下面没有覆盖所有类，因此根据您使用的内容，您可能需要覆盖其他类。

    @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

- jeanadam

3

解决方案实际上非常简单，只需使用 <nav> 标签的 .navbar-expand-lg 或 .navbar-expand-xl 类即可。

例如：

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

感谢大家。

- Technology Garden

0

我建议在您的项目中引入Bootstrap而不是使用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，请创建一个覆盖该特定媒体查询的设置。

- Erik James Robles

0

如果您想要菜单在中型设备上可折叠，

可以直接使用

toggleable="md"

否则，您可以通过设置 Bootstrap 的 SCCS/LESS 进行其他强制折叠的方法。

- Rahul Mahale

请提供一个示例（代码）来展示如何解决OP的问题。谢谢！ - Joel Hager

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ESP32 · Accepted Answer

如果您不想使用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-item{width: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/