如何在元素堆栈时设置媒体查询

Question

我连续两个div：

<div id='div1' class="col-md-3" style="float:right;">
</div>
<div id='div2' class="col-xs-12 col-md-9">
</div>

当窗户足够大时，两个div并排坐着 但是，当窗口宽度减小时，＆lt; div1＆＃39;堆叠在＆＃39; div2＆＃39;之上。 ＆＃39; DIV2＆＃39;已margin-left:5%;如何为div2设置相同内容，但如果将其叠加在上，则仅

Answer 1

他们堆叠是因为bootstrap的列如何工作。类col-md-3和col-md-9表示当屏幕尺寸达到992px时（根据docs），您的div将占用3列和9列（总共12列） ） 分别。这就是bootstrap网格系统的设计工作方式。如果屏幕宽度小于屏幕宽度，则它们将占据屏幕的整个宽度。您的媒体查询应如下所示：

@media (max-width: 992px) { <your_css> }