Twitter的引導（V3）多行標籤

請在這裏看到的jsfiddle：http://jsfiddle.net/aRJr2/Twitter的引導（V3）多行標籤

正如你可以在右上角看到，下一個標籤的左邊部分是在第一線，但它的其餘部分在第二行。

爲了使它出現在同一行中，我需要做些什麼改變？

的代碼：

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

來源

2014-01-12 Peter

而不必重新排列HTML元素有可能改變顯示屬性的標籤，適當地調整填充和行高：

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

來源

2014-01-14 11:43:42

非常好，非常感謝！ – Peter

'display：inline-block;'解決了我的問題，.label沒有在小視口的新行上中斷。現在它乾淨地將其自身插入其相鄰內容下面。謝謝！ –

我能夠這樣做使用：

.label { 
    display: inline-table; 
    line-height: initial; 
}

來源

2016-02-09 03:42:03 thouliha

我修改了thouliha的代碼。這將像預期的那樣工作並且乾淨。

.label { 
    display: inline-table; 
    line-height: initial; 
    margin-bottom: 2px; 
}

來源

2017-09-23 19:33:50 ryush00

Twitter的引導（V3）多行標籤

回答

相關問題