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

只需text-right在面板页脚div上添加该类

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