css - Twitter Bootstrap(v3)多行标签

请在此处查看jsfiddle:http://jsfiddle.net/aRJr2/

正如您在右上 Angular 看到的那样，下一个标签的左侧部分在第一行中，而其余部分在第二行中。

为了使其显示在同一行中，我需要做哪些更改？

编码:

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

最佳答案

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

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

关于css - Twitter Bootstrap(v3)多行标签，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21080381/