Bootstrap 4正确使用row和col类的方法[重复]

Question

在我的div 元素中，我想放置两行。 第一行包含两个 input 元素。因此，我可以将这两个输入元素放入两个单独的列中。

但是在我的第二行中只有一个按钮元素。我不能放置两个单独的列。这是我现在的代码。

<div id="app">
    <div class="row">
      <div class="col">
        First name: <input type="text" name="" value="">
      </div>

      <div class="col">
        Last name:  <input type="text" name="" value="">
      </div>
    </div>

    <div class="row">
        <button type="button" name="button">Save</button>
    </div>
  </div>

对于第二行，我应该将该按钮包装在列中。像这样

<div class="row">
      <div class="col">
        <button type="button" name="button">Save</button>
      </div>
    </div>

或者我以前的代码就可以了？ 什么是专业的方法来做到这一点。 我希望你能理解我的问题。 谢谢。

Answer 1

对于第二行，我应该将该按钮包装在列中。像这样

是的，只有 Bootstrap 列可以作为 Bootstrap 行的直接子级。

因此，在每个 Bootstrap 行中，您必须至少有一个 Bootstrap 列，并且您的所有内容都必须进入 Bootstrap 列，而不能直接进入 Bootstrap 行。

这是因为 Bootstrap 行和列被设计成成对工作，即任何内容都不能直接放入 Bootstrap 行。只有 Bootstrap 列可以是 Bootstrap 行的直接子级。

参考：

https://getbootstrap.com/docs/4.0/layout/grid/