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来修复它?

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

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

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

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

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

我觉得奇怪的是,.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; }