Bootstrap 4使用行和列类的正确方法 [英] Bootstrap 4 correct way to use row and col classes

问题描述

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

In my div element I want to put two rows. The first row contains two input elements.For that reason I can put that two input elements into two separate columns.

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

But in my second row there is only one button element.I can't put two separate columns. This is my code right now.

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

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

For the second row instead of that should I have to wrap that button inside a column. Like this

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

还是我以前的代码很好? 有什么专业的方法可以做到这一点. 我希望你能理解我的问题. 谢谢.

Or my previous code is just fine? What is the professional way to do this. I hope you understand my question. thank you.

推荐答案

对于第二行而不是第二行，我必须将该按钮包装在列中.像这样

For the second row instead of that should I have to wrap that button inside a column. Like this

是的，仅允许Bootstrap列作为Bootstrap行的直接子代.

Yes, only a Bootstrap column is allowed to be a direct child of a Bootstrap row.

因此，在每个Bootstrap行中，您必须至少有一个Bootstrap列，并且您的所有内容都必须放入Bootstrap列中，并且切勿直接进入Bootstrap行中.

So, in every Bootstrap row, you must have at least one Bootstrap column and all of your content must go into Bootstrap columns and never into Bootstrap rows directly.

这是因为Bootstrap行和列被设计为可成对使用，即，绝对不能将任何内容直接放入Bootstrap行中.只有Bootstrap列可以是Bootstrap行的直接子代.

This is because Bootstrap rows and columns are designed to work in pairs i.e. no content may ever be placed directly into a Bootstrap row. Only Bootstrap columns may be direct children of Bootstrap rows.

参考:

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

这篇关于Bootstrap 4使用行和列类的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！