Question

我在一个12 col 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

Answer 1

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

Answer 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>

Answer 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>

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

3 个答案: