Bootstrap：在面板页脚中左右拉断页脚答案

【问题标题】：Bootstrap: pull left and right in panel footer breaks footerBootstrap：在面板页脚中左右拉断页脚
【发布时间】：2014-07-15 09:10:58
【问题描述】：

我有一个 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 来解决它？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

我认为 .panel-footer 没有像 .panel-body 甚至 .modal-footer 那样包含在 clearfix css 库中，这很奇怪。不必记住在任何页脚上抛出一个 clearfix 类（如果你有很多可能会很痛苦），最好将 clearfix css 添加到主 CSS 中的 .panel-footer 或直接编辑库。

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

来自引导文档 (#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>

【讨论】：

漂亮干净！谢谢！

【解决方案4】：

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

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

【讨论】：

完美。谢谢！我尝试了 clearfix，但在错误的地方。
对我来说，不得不这样做似乎很糟糕。