Bootstrap 3 合理的多行导航药丸答案

【问题标题】：Bootstrap 3 justified nav-pills with multiple linesBootstrap 3 合理的多行导航药丸
【发布时间】：2016-11-20 23:55:59
【问题描述】：

我希望我的 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">

那么它们是合理的，但药丸不会换行（而是带有药丸的文本换行为多行）。

我尝试添加

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

这阻止了文本包裹在药丸中，但现在药丸从页面右侧溢出。

有没有办法让药片被证明是合理的，也可以包装？我不喜欢不合理的药丸包装时的样子。

我应该补充一点，这是针对用户生成的内容，因此它需要适用于可变数量的药丸和每个药丸的不同文本长度。

【问题讨论】：

有没有可能你可以把每一个都放到一列中？
@Crowes，很奇怪，我确定我已经回复了您的评论，但现在它已经消失了。我对列没问题。例如，药丸一下药丸四，药丸二下药丸五，药丸三下无药丸。

标签： css twitter-bootstrap

【解决方案1】：

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 默认值。

单击上面生成的药丸可以在选项卡之间切换。唯一不起作用的是药丸不指示哪个选项卡处于活动状态。用于将“活动”类添加到显示选项卡的药丸的 Bootstrap Javascript 不起作用，因为该 javascript 正在寻找<li>。我可以忍受。

【讨论】：