Question

我的Bootstrap导航栏定义如下：<ul class='nav nav-pills nav-stacked'>导致垂直导航（侧边栏）。

现在我想在小型和小型设备上禁用nav-stacked类，以便菜单水平而不是垂直显示。

我怎样才能做到这一点？

Answer 1

.nav-stacked类应用的唯一样式如下......

nav-stacked > li {
  float: none;
}
.nav-stacked > li + li {
  margin-top: 2px;
  margin-left: 0;
}

使用媒体查询在期望的断点处覆盖它们（返回.nav-pills）。看起来像这样...... jsFiddle

@media (max-width: 992px) {
    .nav-stacked > li {
      float: left;
    }
    .nav-stacked > li + li {
      margin-top: 0;
      margin-left: 2px;
    }
}

Answer 2

你有两种方式： 1-使用java脚本并更改sm和xs设备的类

2-创建侧边栏和水平导航。为每个人添加适当的课程

如何为小型设备禁用Bootstrap导航堆叠？

2 个答案: