html - Bootstrap 桌面上的 3 个水平选项卡，移动设备上的垂直选项卡

Question

我有以下代码

<div class="row">
<h4>Categories</h4>
<ul class="nav nav-tabs">
    <li role="presentation"><a href="#0" class="thumbnail">All Categories</a></li>
    <li><a href="#1" class="thumbnail">Computers</a></li>
    <li><a href="#1" class="thumbnail">Vehicles</a></li>
    <li><a href="#1" class="thumbnail">Firearms</a></li>
</ul>
</div>

在桌面浏览器上产生这个

但在手机上它看起来像这样

如果我将类 nav-stacked 添加到 ul 我得到我正在寻找的东西 在移动设备上像这样:

但它也堆叠在桌面上。我希望选项卡在桌面浏览器上像第一张图片一样是水平的，但在移动设备上是垂直的。如何实现？

Answer 1

考虑使用 justified navs .它们将在大视口(viewport)上拉伸(stretch)至其父容器的宽度，并在小屏幕上垂直堆叠。

<ul class="nav nav-tabs nav-justified">
  ...
</ul>

或者，您可以添加一个模仿 .nav-justified 行为的媒体查询:

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