响应行不尊重其内部DIV的高度

Responsive Row Not Respecting Height Of DIVs inside it

本文关键字：内部 DIV 高度 响应      更新时间：2023-09-26

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

<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

Bootstrap列使用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

试试这个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>

<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>
相关文章：