Bootstrap 4 正确使用 row 和 col 类的方法 [英] 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 正确使用 row 和 col 类的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！