Question

我有一个简单的标记，当屏幕尺寸小于中等尺寸时，我希望堆叠两列。我正在使用引导程序来实现这一点，但是只有其中一列会堆叠，而另一列会消失。消失的div是＃purple-div

有什么想法吗？

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

    <div id="staff" class="row py-5">
        <div class="col-md-6">
            <div id="purple-div">
                <div id="staff-img"></div>
            </div>
        </div>
        <div class="col-md-6">
            <h4>Staff</h4>
            <p>Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo
                eget malesuada. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus
                convallis quis ac lectus.</p>
    
            <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget
                consectetur sed, convallis at tellus. Sed porttitor lectus nibh. Lorem ipsum dolor sit amet, consectetur
                adipiscing elit. Sed porttitor lectus nibh.</p>
        </div>
    </div>

Answer 1

以下中等大小为（xs-sm），因此您必须将col-md-6更改为col-6

div在调整大小后消失

1 个答案: