Reactjs 引导列未按预期工作

我试图有12列，在大屏幕上每列占1列，在小屏幕上每列占4列。但当我试图最小化它时，什么也没发生，它们只是被一个推到另一个下面。我想在小屏幕上一行有3列，但那没有发生，我想知道我在这里做错了什么。你能不能帮我一下，不要给这篇文章增加负面的名声？ 谢谢大家!

代码如下：

<div class="container">
  <div class="row">
    <div class="col-lg-1 col-xs-4 bg-warning">Warning</div>
    <div class="col-lg-1 col-xs-4 bg-info">Info</div>
    <div class="col-lg-1 col-xs-4 bg-danger">Cancel</div>
    <div class="col-lg-1 col-xs-4 bg-success">Yes</div>
    <div class="col-lg-1 col-xs-4 bg-warning">Warning</div>
    <div class="col-lg-1 col-xs-4 bg-info">Info</div>
    <div class="col-lg-1 col-xs-4 bg-danger">Cancel</div>
    <div class="col-lg-1 col-xs-4 bg-success">Yes</div>
    <div class="col-lg-1 col-xs-4 bg-warning">Warning</div>
    <div class="col-lg-1 col-xs-4 bg-info">Info</div>
    <div class="col-lg-1 col-xs-4 bg-danger">Cancel</div>
    <div class="col-lg-1 col-xs-4 bg-success">Yes</div>
  </div>
</div>

列xs在引导程序4中不可用

对于xs，您只能使用col。Like:col-4

要了解更多信息，请查看引导

列xs在引导程序4中不可用

对于xs，您只能使用col。Like:col-4

---

要了解更多信息，请查看引导程序。

据我所知，引导程序4中没有列xs-。所以在小屏幕上使用col

.col-sm for larger mobile phones (devices with resolutions ≥ 576px);
.col-md for tablets (≥768px);
.col-lg for laptops (≥992px);
.col-xl for desktops (≥1200px)

---

据我所知，引导程序4中没有列xs-。所以在小屏幕上使用col

.col-sm for larger mobile phones (devices with resolutions ≥ 576px);
.col-md for tablets (≥768px);
.col-lg for laptops (≥992px);
.col-xl for desktops (≥1200px)

---

没错，但这是我找到答案的方式：没错，但这是我找到答案的方式：