Bootstrap：將文本限制爲列表組的一部分

我試圖創建一個列表組，其中有一些文本是常用列表，但在右側有一個向上和向下按鈕。我已經使用了引導程序的默認列表組，並將其中的一些按鈕與類拉右。問題是，如果文本太長，按鈕放置會變得很糟糕。Bootstrap：將文本限制爲列表組的一部分

這可以在這個小提琴這裏可以看出：http://jsfiddle.net/qd0z7Ljc/

<div class="col-md-6"> 
<h2> Front </h2> 
<div class="list-group"> 
    <a href="#" class="list-group-item"> 

    Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis 
    <button type="button" class="btn btn-success btn-sm pull-right">Up</button> 
    <button type="button" class="btn btn-danger btn-sm pull-right">Do</button> 
    </a> 
    <a href="#" class="list-group-item">Morbi leo risus 
    <button type="button" class="btn btn-success btn-sm pull-right">Up</button> 
    <button type="button" class="btn btn-danger btn-sm pull-right">Do</button> 
    </a> 
    <a href="#" class="list-group-item">Porta ac consectetur ac 
    <button type="button" class="btn btn-success btn-sm pull-right">Up</button> 
    <button type="button" class="btn btn-danger btn-sm pull-right">Do</button> 
    </a> 
    <a href="#" class="list-group-item">Vestibulum at eros 
    <button type="button" class="btn btn-success btn-sm pull-right">Up</button> 
    <button type="button" class="btn btn-danger btn-sm pull-right">Do</button> 
    </a> 
</div> 
</div>

我想去的地方文本所佔用的說的效果，空間的80％，而剩下的20％是始終向上/向下按鈕給予統一的視覺效果。

來源

2014-09-23 yayu

一個'錨內button''了'是不是有效的HTML5見http://jsfiddle.net/qd0z7Ljc/。 – Beterraba 2014-09-23 18:04:39

將btn元素與<div class="pull-right">環繞並刪除pull-right。這使得兩個按鈕元素粘在一起。由於pull-right類別在文檔流程之外使用按鈕，因此它們不會影響list-group-item的高度。通過添加clearfix類的<a class="list-group-item">

現在你有兩個不同的選項

放置文本在a標記的新<div>後解決這個問題。這會使瀏覽器放置按鈕後放置文本，使按鈕始終顯示在項目的右上角。如果文本真的很長，但它可能會環繞按鈕。如果你不想要的話，那麼Bootstrap允許網格嵌套。這意味着您可以在a標記內添加另一個.row和col-xs-*列，以便您將文本置於左側，並將按鈕置於右側列。

兩個選項

來源

2014-09-23 18:31:47 ckuijjer

謝謝，生病嘗試一下。 – yayu 2014-09-23 19:48:37

Bootstrap：將文本限制爲列表組的一部分

回答

相關問題