在col-sm-6内部的Bootstrap 4 col-sm-6无法正常工作

Question

我试图使用类为col-sm-6的div，并尝试使用col-sm-6和col-sm-6类将其再次划分为12个网格。但是，它似乎不起作用。 col-sm-6内的col-sm-6占用了父对象的整个宽度，而不是应保持其宽度的50％。

此模式曾经在Bootstrap 3中很好用，但似乎在Bootstrap 4中不起作用。我有代码证明它在bootstrap3中可用，但在下面的4中不起作用：

Bootstrap 3-它起作用：https://codepen.io/vishalgulati/pen/axMNRz

Bootstrap 4-它不起作用-https://codepen.io/vishalgulati/pen/KYEzxr

两个代码都使用相同的代码：

  <div class="container-fluid">
    <!-- Control the column width, and how they should appear on different devices -->
    <div class="row">
      <div class="col-sm-6" style="background-color:yellow;">
        <div class="col-sm-6" style="background-color:red;">25%</div>
        <div class="col-sm-6" style="background-color:pink;">25%</div>
      </div>
      <div class="col-sm-6" style="background-color:orange;">50%</div>
    </div>
</div>

Answer 1

Bootrap 4使用“ flex”样式。因此，您有两种方法：

1）您需要添加

<div class="row">

在前两个div类为col-sm-6的div之前，然后将其关闭。

您可以看到修改后的示例：https://codepen.io/anon/pen/ZZPOEz

2）您需要在cols-sm-6的第一个div上添加flex（ display：flex; ）。

<div class="col-sm-6" style="display: flex;background-color:yellow;">

您可以看到修改后的示例：https://codepen.io/anon/pen/MRxeow

或向其中添加类“行”-https://codepen.io/anon/pen/wZOWPO

<div class="col-sm-6 row" style="background-color:yellow;">

Answer 2

col仅在它是row的直接子代时才起作用。在您的情况下，如果col在另一个col内，则它将不起作用。因此，您必须将它们用行包起来。而且由于该行的默认margin为-15，因此您必须用container包装它。检查一下。

<div class="container-fluid">
    <!-- Control the column width, and how they should appear on different devices -->
    <div class="row">
      <div class="col-sm-6" style="background-color:yellow;">
        <div class="container">
         <div class="row">
          <div class="col-sm-6" style="background-color:red;">25%</div>
          <div class="col-sm-6" style="background-color:pink;">25%</div>
         </div>
       </div>
      </div>
      <div class="col-sm-6" style="background-color:orange;">50%</div>
    </div>
</div>