Bootstrap 3對齊導航藥丸與多行

我想我的Bootstrap導航藥片是合理的，也包裝成多行。例如，像這樣：Bootstrap 3對齊導航藥丸與多行

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

如果我用這個我丸：

<ul class="nav nav-pills">

然後在需要時將藥片換到多行，但藥是沒有道理的。

如果使用這個對我的藥丸：

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

那麼他們是有道理的，但藥不換行到多行（而不是用藥丸包裝爲多行文本）。

我嘗試添加

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

，這防止了文本從藥丸包裝，但現在的藥丸溢出到頁面的右側。

是否有一種方法可以使藥片合理化幷包裝？當他們包裝時，我不喜歡不合理藥丸的外觀。

我應該補充說這是用於用戶生成的內容，因此它需要爲每個藥丸的可變數量和不同的文本長度工作。

來源

2016-11-16 Jeff O' Neill

你有沒有可能把每一個放到一個列中？ – Crowes

@瘋狂，怪異，我確定我已經回覆了你的評論，但現在已經消失了。我很喜歡列。例如，第四丸在第一丸下，第五丸在第二丸下，第三丸下沒有。 –

nav-pills的Bootstrap示例全部顯示使用<li>生成的藥片。事實證明，即使您以其他方式生成藥丸，您也可以獲得大部分的nav-pills功能。

我使用網格系統生成了我的藥丸，並利用瞭如果您有超過12列的事實，額外的藥片會優雅地溢出到下一行。這裏是我的模板代碼要做到這一點：

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

我爲my-pill CSS使藥片看起來類似於引導默認。

點擊上面生成的藥片可以在標籤之間切換。唯一不起作用的是藥片不能指出哪個標籤是活動的。用於將「活動」類添加到顯示選項卡的藥丸的Bootstrap Javascript不起作用，因爲該javascript正在尋找<li>。我可以忍受這一點。

來源

2016-11-20 15:54:22

Bootstrap 3對齊導航藥丸與多行

回答

相關問題