css - Bootstrap 3 具有多行的合理导航丸

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

那么它们是合理的，但是药丸不会换行(而是带有药丸的文本换行到多行)。

我尝试添加

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

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

有没有办法让药丸既合理又包裹起来？我不喜欢包装不合理的药丸的样子。

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

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

我的 CSS my-pill使药丸看起来类似于 Bootstrap 默认设置。

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