Question

我试图创建一个组按钮并将它们浮动到div容器的右侧：

{{1}}

正如你可以从这个小提琴中看到的那样，当我应用浮动右边时按钮突破了div：

https://jsfiddle.net/xa9wvouc/6/

我可以将标题设置为min0height，但感觉就像是黑客攻击？实现这一目标的正确方法是什么。

Answer 1

如果您正在使用Bootstrap，请将按钮组连续包装（请参阅下面的代码）。在这里，您可以根据需要调整按钮组的边距右侧。

https://jsfiddle.net/meppiel/ysx7nvk4/1/

<div class="thumbnail">
  <div class="caption">
    <div class="row">
      <div class="button-group pull-right" style="margin-right: 15px">
        <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span></button>
        <button class="btn btn-success btn-xs"><span class="glyphicon glyphicon-home"></span></button>
      </div>
    </div>
  </div>
</div>

Answer 2

因为如果将pull-right应用于按钮组，则意味着按钮组将是浮动的，其父div的高度将会折叠。因此，为了避免折叠父div，您需要将clearfix类应用于父div

<div class="thumbnail">
  <div class="caption clearfix">
    <p>Here is some blurb...</p>
      <div class="button-group pull-right">
        <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span></button>
        <button class="btn btn-success btn-xs"><span class="glyphicon glyphicon-home"></span></button>
       </div>
    </div>
</div>

带浮动的Bootstrap按钮组

2 个答案: