html - 在 lg 上只有一个 div 作为 xs 分辨率

Question

我想获得异常行为 Bootstrap 和媒体查询。

一个div(a)的内容应该取决于他的宽度而不是浏览器窗口的宽度。在图片(a)的情况下，宽度为600px，应显示为XS，容器应充当LG。

Answer 1

您错误地想到了 Bootstrap。

bootstrap 的要点是允许您根据屏幕的宽度轻松修改元素的行为。例如，如果您仅使用网格系统，则您要修改的只是基于屏幕 width 的元素本身的 width。

如果您希望您的 a 元素在任何时候都表现得像 sm，而不管屏幕的宽度如何(或者至少直到它达到 xs，例如)然后你可以使用类似的东西:

 <div class=" div-a -col-sm-6"></div>

只要屏幕宽度大于 sm，这将告诉 bootstrap 显示 6 列的 div A。

我不确定您所说的“充当 LG 的容器”是什么意思，但我认为您的意思是它应该只针对 LG 屏幕进行修改。然后:

<div class="container-div col-LG-12 col-*-newSize">
  <div class=" div-a -col-sm-6">
    *content*
  </div>
  <div class="container-b-c col-*-6"
    <div class"div-b col-*-12"
       -content-
    </div>
    <div class"div-c col-*-12"
       -content-
    </div>
 </div> //End of container-b-c
</div> //end of container-div

其中 * 是您需要的尺寸。