响应行不尊重其中 DIV 的高度

Posted 2023-03-06

【中文标题】响应行不尊重其中 DIV 的高度

【英文标题】：Responsive Row Not Respecting Height Of DIVs inside it

【发布时间】：2016-02-18 23:58:03

【问题描述】：

我在 12 列 div 中连续放置了三个 div，并为桌面视图设置了最小高度。当查看器变窄时，周围的 div 不会拉伸以包含现在堆叠的 div。我知道这一定是一个简单的解决方法，但我的大脑正在与我作斗争！请参阅下面的小提琴并感谢您的帮助！

<div class="row">
    <div class="col-md-12" style="background-color: yellow">

        <div style="min-height:200px">

            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
                Content<br>Content<br>Content<br>Content<br>
            </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
                Content2<br>Content22<br>Content2<br>Content2<br>
            </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
                Content3<br>Content3<br>Content3<br>Content3<br>
            </div>

        </div>


    </div>
</div>

JSfiddle

【问题讨论】：

为什么 col 中有 col ？这个 div 是什么？检查这个小提琴，看看它是否是你想要做的：jsfiddle.net/ok696Lkw/3

原因是在实际页面中使用一些 js 脚本创建了一个围绕三个框的样式，所以我需要它们以这种方式嵌套。不过感谢您的回答，它确实有帮助！

【参考方案1】：

引导列使用float 属性，因此不计为block 元素。

要解决此问题，您需要将overflow: auto 添加到包含元素，如下所示：

<div class="row">
    <div class="col-md-12" style="background-color: yellow">

        <div style="min-height:200px; overflow: auto;">

            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
                Content<br>Content<br>Content<br>Content<br>
            </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
                Content2<br>Content22<br>Content2<br>Content2<br>
            </div>
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
                Content3<br>Content3<br>Content3<br>Content3<br>
            </div>

        </div>


    </div>
</div>

JSFiddle

【参考方案2】：

试试这个http://jsfiddle.net/ok696Lkw/4/

HTML

<div class="row">
    <div class="col-md-12" style="background-color: yellow">

        <div class="row">
            <div style="min-height:200px">

                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
                    Content<br>Content<br>Content<br>Content<br>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
                    Content2<br>Content22<br>Content2<br>Content2<br>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">
                    Content3<br>Content3<br>Content3<br>Content3<br>
                </div>

            </div>
        </div>


    </div>
</div>

【参考方案3】：

<div class="row">
    <div class="col-md-12" style="background-color: yellow">
        <div style="min-height:200px">
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">Content
                <br>Content
                <br>Content
                <br>Content
                <br>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">Content2
                <br>Content22
                <br>Content2
                <br>Content2
                <br>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background-color: red; margin:10px;">Content3
                <br>Content3
                <br>Content3
                <br>Content3
                <br>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
</div>