18

如何创建使用引导程序自动堆叠的响应式选项卡。我的导航代码是 -

<div>
    <ul id="tabslist_navs" class="nav nav-tabs">
        <li><a href="#">Normal</a></li>
        <li><a href="#">Hover</a></li>
        <li><a href="#">Selected</a></li>
    </ul>
    <div class="tab-content">
        ....
    </div>
</div>

I need them to get converted to stacked tabs when viewed on small screens. Right now it just moves the tabs into multiple likes which looks ugly. I want something like the navbar collapse but without the button to activate the collapse.

4

6 回答 6

39

这应该有效：

@media (max-width: 480px) { 
    .nav-tabs > li {
        float:none;
    }
}
于 2012-12-15T15:51:26.850 回答
18

使用 BootStrap 第3版，您可以通过添加 4 个 CSS 类以干净的垂直方式为超小型设备堆叠所有内容。如您所见，BootStrap 和 Tab的渲染效果并不好。下面的代码可以通过删除所有背景和边框来完成这项工作。

@media (max-width: 767px) { 
    .nav-tabs > li {
        float:none;
        border:1px solid #dddddd;
    }
    .nav-tabs > li.active > a{
        border:none;
    }
    .nav > li > a:hover, .nav > li > a:focus,
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus
     {
        background:none;
        border:none;
    }
}
于 2014-03-22T23:53:29.783 回答
4

如果您使用 SCSS 或 LESS 支持，则应使用正确的媒体查询变量：

在 SCSS 中：

  @media (max-width: $screen-md-min) {
    .nav-tabs > li {
      float:none;
    }
  }

少于：

  @media (max-width: @screen-md-min) {
    .nav-tabs > li {
      float:none;
    }
  }

检查http://getbootstrap.com/css/了解有关可能变量的详细信息。

于 2014-07-31T09:31:28.890 回答
4

如果您发现 480 不这样做（我有很长的标签标题），您可以随时更改您的最大宽度。我用了：

@media (max-width: 991px) { 
 .nav-tabs > li {
    float:none;
 }
}

它就像一个魅力。

于 2014-04-29T19:23:07.817 回答
2 
    @media (max-width: 480px) {
        .nav-tabs > li {
            float:none;
            margin-bottom: 0px;
        }
        .nav-tabs > li.active > a {
            border: 1px solid #dddddd;
        }
        .nav-tabs > li.active > a:hover {
            border: 1px solid #dddddd;
        }
        .nav-tabs > li  > a {
            border-bottom: 1px solid #dddddd;
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
        }
        .nav-tabs > li > a:hover {
            border-color: #dddddd;
        }
    }

这个比较简单好看。

于 2016-08-04T20:04:49.990 回答
0

在我看来，这里的其他解决方案仍有很多不足之处。这是一个基于早期解决方案但使用 CSS flexbox 的解决方案。选项卡尽可能并排放置，仅在需要时换成多行，并且仍然填充屏幕的宽度，水平空间分布均匀。它看起来干净而平衡，并且可以很好地扩展以处理更长的选项卡或更多的选项卡。它还解决了其他解决方案的一些边界和边界半径问题。

SCSS：

@media (max-width: $screen-xs-max) {
  .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    padding-right: 1px;
    > li {
      flex: auto;
      text-align: center;
      border: 1px solid $nav-tabs-border-color;
      margin-right: -1px;
      > a {
        margin: 0;
      }
      &.active {
        background: $gray-lighter;
        > a, > a:hover, > a:focus {
          border: none;
          background: none;
        }
      }
    }
  }
}

或者，纯 CSS：

@media (max-width: 767px) {
  .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    padding-right: 1px;
  }
  .nav-tabs > li {
    flex: auto;
    text-align: center;
    border: 1px solid #ddd;
    margin-right: -1px;
  }
  .nav-tabs > li > a {
    margin: 0;
  }
  .nav-tabs > li.active {
    background: #eee;
  }
  .nav-tabs > li.active > a,
  .nav-tabs > li.active > a:hover,
  .nav-tabs > li.active > a:focus {
    border: none;
    background: none;
  }
}
于 2016-12-07T20:00:16.173 回答