时间戳

首页 > 解决方案 > Bootstrap4 如何调整网格元素的引导类，但前提是网格发生故障？

jquery - Bootstrap4 如何调整网格元素的引导类，但前提是网格发生故障？

问题描述

是否有可能将网格元素的引导类从 to 调整col-md-9为col-md-12但仅在网格中断时（例如，因为调整浏览器窗口的大小）。

例子：

https://jsfiddle.net/kp41m0xq/

<body>
<div class="row">
  <div class="col-md-3">
    <!-- Something, graph or so -->
  </div>
  <div class="col-md-9">
    <!-- Something, graph or so -->
  </div>
</div>
</body>

当窗口足够大时，这将如下所示：

在此处输入图像描述

但如果窗口很小，那就很糟糕了：

在此处输入图像描述

小窗口应该是什么样子：

在此处输入图像描述

col-md-9如果窗口足够大并且col-md-12（第三张图片）窗口很小，是否可以获得类是（第一张图片）的效果？如果引导程序本身可以做到这一点，那就太好了。否则我也可以使用 jquery。

标签： jqueryhtmlcssbootstrap-4

解决方案

您需要为较小的屏幕使用类组合

<body>
<div class="row">
  <div class="col-md-3 col-sm-3">
    <!-- Something, graph or so -->
  </div>
  <div class="col-md-9 col-sm-9">
    <!-- Something, graph or so -->
  </div>
</div>
</body>

或使用通用类

<body>
<div class="row">
  <div class="col-3">
    <!-- Something, graph or so -->
  </div>
  <div class="col-9">
    <!-- Something, graph or so -->
  </div>
</div>
</body>

推荐阅读