Bootstrap 4使用行和列类的正确方法

Question

在我的div元素中，我想放置两行。在第一行包含两个inputelements.For这个原因，我可以把那两个输入元素分成两个单独的列。

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

<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/