Question

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

示例：

<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。

Answer 1

对于较小的屏幕，您需要使用类的组合

<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>

Answer 2

您需要按如下方式使用'col-sm-12'类和'col-md-9'类

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

Bootstrap4仅当网格崩溃时，如何调整网格元素的引导类？

2 个答案: