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对齐导航药丸与多行

回答

相关问题