Html 引导4列不工作

我是一名学生。我使用了Bootstrap3.3.7，并在迁移到v4.1之后使用了Bootstrap3.3.7。在此版本中，列不会自动向右浮动。所以我使用了d-inline-block类。我创建了4个块，每个块有3列。行中的列数等于12。然后，最后一列跳转到新行，而不是换行到上一列。但这段代码在Bootstrap3.3.7中运行良好。另外，我只对一个块使用了2列，当列数小于12时，就没有问题了。我在谷歌上找不到合适的解决方案。请帮忙。多谢各位

例如：

我的代码是：

<section class="popular-templates-section">
  <div class="container-fluid">
    <div class="col-lg-12 col-md-12">
    <div class="popular-templates-title">
      <h4>Most Popular Templates</h4>
    </div>

    <div class="popular-templates">

      <div class="col-lg-3 col-md-3 d-inline-block">   
        <div class="template-img">
          <img src="assets/images/template-thumb/template-1.jpg" alt="">
        </div>
      </div>      


      <div class="col-lg-3 col-md-3 d-inline-block">   
        <div class="template-img">
          <img src="assets/images/template-thumb/template-1.jpg" alt="">
        </div>
      </div>    

      <div class="col-lg-3 col-md-3 d-inline-block">   
        <div class="template-img">
          <img src="assets/images/template-thumb/template-1.jpg" alt="">
        </div>
      </div>   

      <div class="col-lg-3 col-md-3 d-inline-block">   
        <div class="template-img">
          <img src="assets/images/template-thumb/template-1.jpg" alt="">
        </div>
      </div>   

      </div>
    </div>
  </div>
</section>

像这样把你的可乐包成一排

<div class="row">
  <div class="col-lg-6">6 cols</div>
  <div class="col-lg-6">6 cols</div>
</div>

还将img流体类添加到imgs中，使其不会比容器大

像这样把你的可乐包成一排

<div class="row">
  <div class="col-lg-6">6 cols</div>
  <div class="col-lg-6">6 cols</div>
</div>

还将img流体类添加到imgs中，使其不会比容器大

---

这是最新的小提琴

我编辑了你的html，删除了不必要的类。 另外，如果您希望所有设备上的所有列的大小相同，那么您只需要一个col-{number}类

在引导程序4中也没有列xs-{class}。而不是使用col-{number}

---

这是最新的小提琴

我编辑了你的html，删除了不必要的类。 另外，如果您希望所有设备上的所有列的大小相同，那么您只需要一个col-{number}类

在引导程序4中也没有列xs-{class}。而不是使用col-{number}

---

您面临的问题主要是因为您使用的引导网格的语义不正确。在下面找到更正的代码，肯定会有帮助

蓝先生{ 填充物：5px； 背景：蓝色； } 布莱克先生{ 填充物：5px； 背景：黑色； } 作者：EshanRajapakshe 最流行的模板

---

您面临的问题主要是因为您使用的引导网格的语义不正确。在下面找到更正的代码，肯定会有帮助

蓝先生{ 填充物：5px； 背景：蓝色； } 布莱克先生{ 填充物：5px； 背景：黑色； } 作者：EshanRajapakshe 最流行的模板

---

先生，非常感谢您的帮助。但不幸的是，这种方法对我不起作用。如果你能去看看这个链接，那将是很大的帮助。请让我知道我的网站有什么问题。我添加了.row类并删除了.d-inline-block类。同时添加.img流体类。不工作，先生。请通过此链接查看我的网站，并告诉我存在哪些问题。多谢各位@EshanRajapakshe现在查看，编辑了答案。每次您使用col时，家长必须在引导程序中处于一行。先生，我非常感谢您的帮助。但不幸的是，这种方法对我不起作用。如果你能去看看这个链接，那将是很大的帮助。请让我知道我的网站有什么问题。我添加了.row类并删除了.d-inline-block类。同时添加.img流体类。不工作，先生。请通过此链接查看我的网站，并告诉我存在哪些问题。多谢各位@EshanRajapakshe现在查看，编辑了答案。每次使用col时，父级必须是引导中的一行。

<section class="popular-templates-section">
  <div class="container-fluid">
    <div class="popular-templates-title">
      <h4>Most Popular Templates</h4>
    </div>
    <div class="popular-templates">
      <div class="row m-0">
        <div class="col-3 blue">
          <div class="template-img">
            <img src="assets/images/template-thumb/template-1.jpg" alt="">
          </div>
        </div>
        <div class="col-3 black">
          <div class="template-img">
            <img src="assets/images/template-thumb/template-1.jpg" alt="">
          </div>
        </div>

        <div class="col-3 blue">
          <div class="template-img">
            <img src="assets/images/template-thumb/template-1.jpg" alt="">
          </div>
        </div>

        <div class="col-3 black">
          <div class="template-img">
            <img src="assets/images/template-thumb/template-1.jpg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>

</section>