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>

在桌面浏览器上生成此内容

enter image description here

但在移动设备上看起来像这样

enter image description here

如果我将类nav-stacked添加到ul ，我会在移动设备上获得我正在寻找的内容，如下所示：

enter image description here

但它也堆放在桌面上。我希望这些标签在桌面浏览器的第一张图片中是水平的，但在移动设备上是垂直标签。如何实现这一目标？

Answer 1

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

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

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

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

Answer 2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
function resize() {
    if ($(window).width() < 768) {
     $('.nav-tabs').addClass('nav-stacked');
    }
    else {$('.nav-tabs').removeClass('nav-stacked');}
}

$(document).ready( function() {
    $(window).resize(resize);
    resize();
});
</script>
</head>

<body>
<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>
</body>
</html>

桌面上的Bootstrap 3个水平标签，移动设备上的垂直标签

2 个答案: