Html 如何在引导中并排制作容器？

这是我的容器。我觉得它看起来真的很好，但它只在右边显示一个容器，我希望它显示3个并排。我该怎么做？ 如果我只是将代码复制并粘贴到它的正下方，那么第二个容器就在第一个容器的下方

<div class="container">
    <div class="row">
        <div class="col-sm">
            <h2>Product 2</h2>
        </div>
        <br>
        <br>
        <div class="text-center">
            <img src="https://picsum.photos/200" alt="..." class="img-thumbnail" />
        </div>
        <div class="text-center">
            <button class="btn btn-primary btn-sx" type="button">Confirm</button>
        </div>
    </div>
</div>

产品2




证实

w3学校： 你试试看：

  <div class="row">
    <div class="col-sm-4">
       <h2>Product 2</h2>
    </div>
    <div class="col-sm-4">
      <img src="https://picsum.photos/200" alt="..." class="img-thumbnail" />
    </div>
    <div class="col-sm-4">
      <button class="btn btn-primary btn-sx" type="button">Confirm</button>
    </div>
  </div>
</div>
`
don't forget : 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

产品2
证实
`
别忘了：

使用引导网格

要将任何元素排列到网格中，请使用引导网格系统。为父元素指定

行

类，并为所有子元素指定

列

类。这将使所有子元素水平共享父元素

<div class="row">
    <div class="col">
        <div class="col-sm">
            <h2>Product 2</h2>
        </div>
    </div>
    <div class="col">
        <div class="text-center">
            <img src="https://picsum.photos/200" alt="..." class="img-thumbnail">
        </div>
    </div>
    <div class="col">
        <div class="text-center">
            <button class="btn btn-primary btn-sx" type="button">Confirm</button>
        </div>
    </div>
</div>

产品2
证实

您可以将

col

替换为

col-4

，这几乎可以做同样的事情，但会更加明确

您可以将断点（如

sm

）添加到类中（如

col-sm

），以便在将窗口调整到某个断点时自动垂直换行

了解有关引导网格系统的所有信息