html - 仅当元素堆叠时如何设置媒体查询

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 并排放置 但是，当窗口宽度减小时，“div1”会堆叠在“div2”之上。 'div2' 有 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> }