在台式機上引導3個水平標簽，在移動設備上引導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

考慮使用合理的導航。 在大視口中，它們將被拉伸到其父容器的寬度，並在小屏幕上垂直堆疊。

<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>

在台式機上引導3個水平標簽，在移動設備上引導3個垂直標簽

問題描述

2 個解決方案

解決方案1
3 已采納 2015-02-02 14:02:23

解決方案2
0 2015-02-02 14:14:42

在台式機上引導3個水平標簽，在移動設備上引導3個垂直標簽

問題描述

2 個解決方案

解決方案1 3 已采納 2015-02-02 14:02:23

解決方案2 0 2015-02-02 14:14:42

解決方案1
3 已采納 2015-02-02 14:02:23

解決方案2
0 2015-02-02 14:14:42