Twitter Bootstrap(v3)多行标签

Question

请在这里查看jsfiddle:http://jsfiddle.net/aRJr2/

正如您在右上角看到的那样,下一个标签的左侧部分位于第一行,但其余部分位于第二行.

为了使它出现在同一行,我需要做哪些更改？

代码:

<div class="panel panel-default">
<div class="panel-heading">
    <h3 class="panel-title">Members</h3>
</div>
<div class="panel-body">
        <div class="label label-info">
            <span>James</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/186"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Robert</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/187"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Jessica</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/188"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Mark</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/189"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Alexandra</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/190"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Kathleen</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/191"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Lorraine</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/192"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Lucy</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/194"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Christina</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/195"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Bryan</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/196"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Melissa</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/197"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Patricia</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/198"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Andrew</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/199"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <a href="http://bower.dev/add_member" class="label label-success getviaajax"><i class="glyphicon glyphicon-plus-sign"></i> Add new</a>
</div>

Answer 1

无需重新排列HTML元素,就可以更改标签的显示属性,适当调整填充和行高:

.panel-body .label {
  display:inline-block;
  padding-top:0;
  padding-bottom:0;
  line-height:1.5em;
}