创建一个有两个col-**-6的引导行，然后在第二个col-***-6中再放两个，使其堆叠.如何使其堆叠

Question

我有点让它工作，尽管它在没有两个col-**-6堆叠的情况下仍然可以放在屏幕上。这基本上就是我想要的：https://prnt.sc/19393xt
每种颜色代表一个col-**-6。这基本上就是我想要的，但无论浏览器窗口大小，都要保持这种状态。我使用col-xxl-6，但只是将浏览器置于全屏模式，它就已经不堆叠了。

<div class="row row-align">
<div style="background-color: skyblue;" class="col-6">
<img style="width: 100px; height: 100px;" src="files/placeholder.png">
</div>
<div class="col-6">
<div class="row row-align">
<div style="background-color: grey;" class="col-xxl-6">
<p>PlaceHolder</p>
</div>
<div style="background-color: limegreen;" class="col-xxl-6">
<p>PlaceHolder</p>
</div>
</div>
</div>
</div>

我无意保留div的背景颜色，只是为了可视化。

为了把它画出来，这基本上是我想要的，但对于所有的屏幕大小(所以它不会调整：https://prnt.sc/193bcso

Answer 1

也许你应该用定义移动设备真正宽度的东西来代替.col-xxl-6，比如：.col-12

在引导程序中，当您使用.col-x-yy类时，它适用于比yy断点更大的所有屏幕。因此，如果您使用.col-12，那么您的div将为所有屏幕大小的使用12行

此外，正如@Zim所做的那样，您可以向嵌套的.row中添加一个.h-100类，以使列具有相同的高度。

它可能看起来是这样的：

<div class="row row-align">
<div style="background-color: skyblue;" class="col-6">
<img style="width: 100px; height: 100px;" src="files/placeholder.png">
</div>
<div class="col-6 ">
<div class="row row-align h-100">
<div style="background-color: grey;" class="col-12">
<p>PlaceHolder</p>
</div>
<div style="background-color: limegreen;" class="col-12">
<p>PlaceHolder</p>
</div>
</div>
</div>
</div>

Answer 2

要了解Bootstrap，需要了解它是如何构建的。花点时间在Github上了解源代码，当你遇到"；奇怪的"；behaviors着眼于生成类的源。

对于您的问题，有几件事需要记住：

• BS列被拆分为12列[默认编译]，其中每列都是"；100%/12〃；宽度。重要的是要记住，.col-x类仅将宽度定义为其父类的百分比
• BS首先是移动的。因此，如果你想要手机的行为，那么就使用基类

根据您的需求，您需要创建这样的结构：

ROW (#1)
COL-6 {50% of Row 1}
(Skyblue)
COL-6 {50% of Row 1}
ROW (#2) <- this will exist inside the 2nd col
COL-12 {100% of Row 2 !!, so nothing left, next one will wrap}
(Grey)
COL-12 {100% of Row 2 again, so will wrap to the next line, still inside row 2}
(LimeGreen)

因此，简化的HTML将是：

<div class="row">
<div style="background-color: skyblue;" class="col-6">
Placeholder
</div>
<div class="col-6">
<div class="row">
<div style="background-color: grey;" class="col-12">
PlaceHolder
</div>
<div style="background-color: limegreen;" class="col-12">
PlaceHolder
</div>
</div>
</div>
</div>