Question

我希望我的Bootstrap导航丸能够被证明是合理的，并且还可以包裹多行。例如，像这样：

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

我对my-pill的css使得这些药片看起来与Bootstrap默认类似。

点击上面生成的药丸可以在标签之间切换。唯一不起作用的是药丸不能指示哪个标签处于活动状态。 Bootstrap Javascript用于添加＆＃34; active＆＃34;因为javascript正在寻找<li>，因此所显示的标签的类别不起作用。我可以忍受。

Bootstrap 3证明了多行导航丸

1 个答案: