Bootstrap：在面板页脚中左右拖动页脚

我有一个Bootstrap面板，在页脚中有两个button：

<div class="panel-footer"> {{ Form::open( array('route' => array('dogs.edit', $dog->id), 'method' => 'get', "class" => 'col-lg-6 ')) }} {{ Form::submit("Edit", array('class' => 'btn btn-default')) }} {{ Form::close() }} {{ Form::open( array('route' => array('dogs.destroy', $dog->id), 'method' => 'delete', "class" => 'col-lg-6 ')) }} {{ Form::submit("Delete", array('class' => 'btn btn-default')) }} {{ Form::close() }} </div> 

每个button的表格都有类pull-left pull-right这样每个button都浮在面板页脚的两边。

浮动工作，但button现在页脚之外：

我尝试使用网格系统，而不是拉帮助器，但我结束了相同的结果。

我也search周围的解决scheme（这一定很常见，我会想），还没有find一个解释，不需要重写自定义CSS的Bootstrap。

是否有可能只用Bootstrap来解决这个问题，还是我需要抛出自己的CSS来修复它？

Answer 1

只需在button后添加一个带有clearfix的div

<div class="clearfix"></div>

Answer 2

斯大林的答案是正确的，但你可以使用另一种更优雅的方法

从Bootstrap文档（ #clearfix ）

通过将.clearfix添加到父元素，轻松清除浮动元素。

只需添加clearfix到父div：

 <div class="panel-footer clearfix"> {{ Form::open( array('route' => array('dogs.edit', $dog->id), 'method' => 'get', "class" => 'col-lg-6 ')) }} {{ Form::submit("Edit", array('class' => 'btn btn-default')) }} {{ Form::close() }} {{ Form::open( array('route' => array('dogs.destroy', $dog->id), 'method' => 'delete', "class" => 'col-lg-6 ')) }} {{ Form::submit("Delete", array('class' => 'btn btn-default')) }} {{ Form::close() }} </div> 

Answer 3

只需在panel-footer div中添加类text-right

Answer 4

我觉得奇怪的是，.panel-footer不包括在clearfix的css库中.panel-body甚至是.modal-footer都是。 而不必记得在任何页脚上抛出一个clearfix类（如果你有很多这可能是一个痛苦），只需要在主CSS中添加clearfix css到.panel-footer或者直接编辑库。

 .panel-footer:before, .panel-footer:after { display: table; content: " "; } .panel-footer:after { clear: both; }