在 bootstrap 4 中使用多个响应式布局

Question

如果我们使用bootstrap 3，我们可以写

<div class="row">
<div class="col-lg-6 col-md-6 col-xs-12">
</div>
<div>

但是如何在 bootstrap 4 中做同样的事情呢？我尝试使用<div class="col-6 col-12">，但它只能用作 col-lg-12（全宽）。我需要在 BS3 和 BS4 中使用具有不同类的相同 div。我该怎么做？

Answer 1

你在 BS3 中的例子：

<div class="row">
    <div class="col-lg-6 col-md-6 col-xs-12">
    </div>
<div>

BS4版本：

<div class="row">
    <div class="col-md-6">
    </div>
<div>

在中等设备下方的上述代码中，它将是全宽（12 列），因为这是默认设置。

在中型及以上设备中，宽度为 6 列。

Answer 2

您可以使用col-12 col-md-6 作为您的课程。