css - Bootstrap : limit text to a portion of list group

Question

我正在尝试制作一个列表组，其中有一些文本作为通常的列表，但在右侧，有一个向上和向下按钮。我已经使用了 bootstrap 的默认列表组，并在其中放置了一些带有 pull-right 类的按钮。问题是，如果文本太长，按钮的位置就会变差。

可以在此处的 fiddle 中看到: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% 始终是向上/向下按钮，以提供统一的视觉效果。

Answer 1

包围两个btn带有 <div class="pull-right"> 的元素并删除 pull-right .这使得两个按钮元素粘在一起。作为pull-right类将按钮置于文档流之外，它们不会影响 list-group-item 的高度.通过添加 clearfix 来解决此问题类到 <a class="list-group-item">

现在你有两个不同的选择

1. 将文本放在 a 中新 <div> 之后的标签.这使得浏览器在放置按钮之后放置文本，使按钮始终出现在元素的右上角。如果文本真的很长，那么它可能会环绕按钮。如果你不想要那个

2. Bootstrap 允许嵌套网格。这意味着您可以添加另一个 .row和几个col-xs-* a 里面的栏目标签允许您将文本放在左侧，按钮放在右侧。

参见 http://jsfiddle.net/qd0z7Ljc/两种选择