与浮动div组合时,Bootstrap面板大于内容

时间:2014-04-13 02:55:38

标签: css twitter-bootstrap twitter-bootstrap-3

当尝试将Bootstrap 3面板与浮动div混合时,我遇到了奇怪的行为。

在这种特定情况下,浮动div是btn-toolbar。面板向左侧拉伸工具栏的高度,而不是将其高度调整为其内部的高度。通过添加或删除按钮更改工具栏的高度会更改面板的高度。我相信他们不应该对彼此产生任何影响。

Bootply: http://www.bootply.com/129573

1 个答案:

答案 0 :(得分:1)

bootstrap.min.css中的这一行 - 第7行导致它。

.clearfix:after, .container:after, .container-fluid:after, .row:after, .form-horizontal .form-group:after, .btn-toolbar:after, .btn-group-vertical>.btn-group:after, .nav:after, .navbar:after, .navbar-header:after, .navbar-collapse:after, .pager:after, .panel-body:after, .modal-footer:after {

明确:两者; }

所以也许创建一个css规则

.main .panel-body:before, .main .panel-body:after{clear:none}

请参阅http://www.bootply.com/129617