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/

Bootstrap 4使用row和col类的正确方法

1 个答案: