Css 为什么我的面板在MD断点中展开

我正在bootstrap中开发一个web应用程序，当我在页面中放置一个面板时遇到了一个问题。在xs、sm和lg断点上，一切看起来都很好，但当我将屏幕调整到md断点时，页眉脱离了页面的流程并填充了大部分页面

html在我看来很正常：

<div class="panel-group" id="accordion56" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading collapsed" role="tab" id="Product0heading56" data-toggle="collapse" href="#Product0section56" data-parent="#accordion56" aria-expanded="false" aria-controls="Product0section56">
            <h3 class="panel-title">
                Test Header
            </h3>
        </div>
        <div id="Product0section56" class="panel-collapse collapse" role="tabpanel" aria-labelledby="Product0heading56" aria-expanded="false" style="height: 0px;">
            <div class="panel-body">
                ...
            </div>
        </div>
    </div>
</div>

测试头
...

我在这里编了一把小提琴来解释：

您需要将示例调整为md断点（我已将当前可见断点放在顶部的蓝色警报中）。我所说的标题是页面下方3/4的部分，是亮蓝色的，标题是“testheader”

任何帮助解决这个问题的人都会非常出色，谢谢

这一定对你有帮助

div.section .panel-default {
    border-color: #179cd9;
    clear: both;
}

---

这里的根本问题实际上不是包含“testheader”的元素——事实上，奇怪的行为是由它上面的元素引起的。这些元素都有一个

.col-md-12

-类，在md断点处，任何

.col-md-*

元素都接收

float:left

您现在看到的是浮动元素与非浮动内容的交互-非浮动容器忽略浮动元素，但内联内容围绕它们流动。这就是为什么标题容器的蓝色背景一直延伸到字段顶部，而

“Test header”本身仍然位于字段下方，将容器延伸到一个巨大的高度

我的建议？利用Bootstrap框架，在那些

.col-md-12

元素周围的容器中使用

.row

类。这就是这个课程的目的——清除孩子们，这样他们就不会引起这种问题。因此，该部分中的HTML将变成：

<!-- [...] -->
<div class="row">
    <div id="ctl15" class="bpControl bpResponsive checkboxEdit col-md-12   has-error has-feedback col1">
        ...
    </div>
    <!-- [...] -->
    <div id="ctl55" class="bpControl bpResponsive numberEdit changed col-md-12">
        ...
    </div>
</div>
<div class="panel-group" id="accordion56" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading collapsed" role="tab" id="Product0heading56" data-toggle="collapse" href="#Product0section56" data-parent="#accordion56" aria-expanded="false" aria-controls="Product0section56">
            <h3 class="panel-title">
                Test Header
            </h3>
        </div>
        <div id="Product0section56" class="panel-collapse collapse" role="tabpanel" aria-labelledby="Product0heading56" aria-expanded="false" style="height: 0px;">
            <div class="panel-body">
                <!-- [...] -->
            </div>
        </div>
    </div>
</div>
<!-- [...] -->

...
...
测试头

---

这里有一个例子来演示。希望这有帮助！如果您有任何问题，请告诉我。

虽然这确实解决了问题（以一种骇人的方式），但Serlite的解决方案实际上为我指明了正确的方向。我同意您的意见，很乐意提供帮助；）谢谢-这为我指明了正确的方向！原来问题是由于一个额外的closing div标记通过关闭它所在的行而破坏了布局，这意味着我超出了该行。确认，我一定在代码中忽略了这一点。无论如何，我很高兴能帮上忙！