Twitter Bootstrap (v3) multi-line labels

Question

Please see the jsfiddle here: http://jsfiddle.net/aRJr2/

As you can see in the top right corner, the left part of the next label is in the first line but the rest of it is in the second line.

What changes do I need to do in order to make it appear in the same line?

The code:

<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

Without having to rearrange the HTML elements it's possible to change a display property for the labels, adjusting the padding and line-height appropriately:

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