ブートストラップ3は、複数行のnav-pillを正当化しました。

Question

Bootstrap nav-pillsを正当化し、複数の行に折り返したいと思います。例えば、このような何か：私は私の薬のためにこれを使用する場合は

[ ( Pill One ) ( Pill Two ) (Pill Three) ] 
[ (  Pill Four ) (  Pill Five ) ] 

は：

<ul class="nav nav-pills"> 

必要なときに薬が複数行に折り返されますが、薬は正当化されません。

もし私の丸薬のための使用この：

<ul class="nav nav-pills nav-justified"> 

は、彼らが正当化されるが、ピルは複数行（複数行に錠剤のラップとテキストではなく）に折り返されません。

Iは

.nav-pills li { white-space: nowrap; } 

を追加しようと、これは錠剤で包むが、今ピルは、ページの右側をオフオーバーフローからテキストを防止します。

丸薬が正当化され、また包装される方法はありますか？私は彼らがラップするときに不当な薬の外観が気に入らない。

これは、ユーザー作成のコンテンツ用であるため、可変数のピルとそれぞれ異なるテキストの長さで動作する必要があることを付け加えておきます。

Answer 1

nav-pillsのブートストラップの例はすべて、<li>を使用して生成される丸薬を示しています。あなたが他の方法で丸薬を生成したとしても、nav-pills機能のほとんどを得ることができます。

私はグリッドシステムを使用して薬を作りました。私は、12本以上のカラムがあれば、追加の薬が次のラインに優雅にこぼれ落ちるという事実を利用します。ここでこれを行うには、私のテンプレートコードは次のとおりです。my-pillため

<div class="row"> 
{% for x in x_list %} 
<div class="col-xs-6 col-sm-4 col-md-3"> 
<div class="my-pill"> 
<a href="#panel-{{ loop.index0 }}" aria-controls="panel-{{ loop.index0}}" role="tab" data-toggle="tab" id="tab-{{ loop.index0 }}">{{ x.title }}</a> 
</div> 
</div> 
{% endfor %} 
</div> 

私のCSSは、ピルはブートストラップのデフォルトのようになります。

上記で生成した丸薬をクリックすると、タブを切り替えることができます。唯一うまくいかないのは、錠剤がどのタブがアクティブであるかを示すものではないということです。 javascriptが<li>を探しているので、表示されたタブのピルに「アクティブ」クラスを追加するためのBootstrap Javascriptは機能しません。私はそれで生きることができます。