Bootstrap：在面板页脚中向左和向右拉断脚

Question

我有一个Bootstrap面板，页脚中有两个按钮：

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

每个按钮的表单都有类pull-left和pull-right，因此它们每个都浮动到面板页脚的任一侧。

浮动正在运行，但按钮现在位于页脚之外：

我尝试使用网格系统而不是拉助手，但我最终得到了相同的结果。

我也在寻找解决方案（我认为这很常见）并且没有找到不需要用自定义css覆盖Bootstrap的解释。

是否可以通过Bootstrap修复此问题，还是需要将自己的css用于修复它？

Answer 1

只需在按钮

后添加带有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

只需在面板页脚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;
}