Html Bootstrap：在面板页脚中左右拉动打破页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23872755/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: pull left and right in panel footer breaks footer
提问by Chris Schmitz
I have a a Bootstrap panel with two buttons in the footer:
我有一个 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>
The forms for each of the buttons have the class pull-leftand pull-rightso that they are each floated to either side of the panel footer.
每个按钮的表单都有类pull-left，pull-right因此它们每个都浮动到面板页脚的任一侧。
The float is working, but the buttons are now outside of the footer:
浮动正在工作，但按钮现在位于页脚之外：
I tried using the grid system instead of the pull helpers but I ended up with the same result.
我尝试使用网格系统而不是拉式助手，但最终得到了相同的结果。
I've also searched around for the solution (this has to be pretty common I would think) and haven't found an explanation that doesn't require overriding Bootstrap with custom css.
我还四处寻找解决方案（我认为这必须很常见）并且没有找到不需要用自定义 css 覆盖 Bootstrap 的解释。
Is it possible to fix this with just Bootstrap or would I need to throw my own css in to fix it?
是否可以仅使用 Bootstrap 来解决此问题，或者我是否需要将自己的 css 放入来修复它？
回答by stalin
Just add a div with clearfix after the buttons
只需在按钮后添加一个带有 clearfix 的 div
<div class="clearfix"></div>
<div class="clearfix"></div>
回答by lborgav
stalin's answer is correct, but you can use another approach that is more elegant
斯大林的回答是正确的，但您可以使用另一种更优雅的方法
From Bootstrap Documentation (#clearfix)
来自 Bootstrap 文档 ( #clearfix)
Easily clear floats by adding .clearfix to the parent element.
通过向父元素添加 .clearfix 轻松清除浮动。
Just add clearfix to the parent div:
只需将 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>
回答by Gianluca Ghettini
just add the class text-righton the panel-footer div
只需text-right在面板页脚 div 上添加类
回答by sean6bucks
I think its strange that .panel-footer isn't included in the clearfix css library already the way .panel-body and even .modal-footer are. Instead of having to remember to throw a clearfix class on ever footer (if you have a lot it can be a pain) its better to just add the clearfix css to .panel-footer in your master CSS or edit the library directly.
我认为 .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;
}
