小さな画面

Question

は、我々はこのような簡単なナビゲーションバーを持っているとしましょう場合はブートストラップはNAV-積み重ね適用されます：
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> 

たときに、ウィンドウや親、私はそれにクラス「NAV-スタック」を追加することができますどのように要素が940ピクセルよりも小さいナビゲーションバーが同じ行にすべての要素を合わせることができなくなったらすぐに

これはjavascriptでかなり簡単ですが、純粋なCSS/htmlソリューションを見たいのですが、ブートストラップのソースコードに@mediaクエリを追加しないでください。

Answer 1

解決策が見つかりました。 "nav-justified"と呼ばれるクラスがあります。ナビゲーションの丸薬は、もはや単一の行に収まらないとすぐに積み重ねられます。

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