html - Bootstrap : pull left and right in panel footer breaks footer

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 类，因此它们都 float 到面板页脚的任一侧。

float 效果正常，但按钮现在位于页脚之外:

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

我也四处寻找解决方案(我认为这一定很常见)并且没有找到不需要使用自定义 css 覆盖 Bootstrap 的解释。

是否可以仅使用 Bootstrap 来解决这个问题，还是我需要加入自己的 css 来解决这个问题？

Answer 1

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

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