引導所適用的資產淨值堆疊如果小屏幕

Question

比方說，我們有一個簡單的導航條是這樣的：
http://getbootstrap.com/components/#nav-pills

<ul class="nav nav-pills"> 
    <li role="presentation" class="active"><a href="#">Home</a></li> 
    <li role="presentation"><a href="#">Profile</a></li> 
    <li role="presentation"><a href="#">Messages</a></li> 
</ul> 

如何添加類「導航籌碼」，就當窗口或父元素比940px小。甚至更好：只要導航欄不能再適合同一行中的所有元素。

這將是非常直接的JavaScript，但我希望看到一個純粹的CSS/HTML解決方案，但不添加@media查詢引導源代碼。

Answer 1

找到解決方案。有一個名爲「導航對齊」的課程。它只是在導航藥丸不適合放入單行時立即堆疊。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<ul class="nav nav-pills nav-justified"> 
 
    <li role="presentation" class="active"><a href="#">Home</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
</ul>

Answer 2

嘗試將此CSS添加到您的解決方案。請檢查結果。這是你想要達到的目標嗎？

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
@media (min-width: 768px) { 
 
    .nav-justified > li { 
 
    display: inline-block; 
 
    width: auto; 
 
    } 
 
}

<ul class="nav nav-pills nav-justified"> 
 
    <li role="presentation" class="active"><a href="#">Home</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
    <li role="presentation"><a href="#">Profile</a></li> 
 
    <li role="presentation"><a href="#">Messages</a></li> 
 
</ul>