bootstrap4：在这种情况下使用 row 和 col 的正确方法答案

【问题标题】：bootstrap4: Correct way to use row and col in this scenariobootstrap4：在这种情况下使用 row 和 col 的正确方法
【发布时间】：2021-06-19 20:38:03
【问题描述】：

我正在使用 bootstrap4。我想在下面有一个 h3 标题和一个按钮。我可以看到有几种方法可以做到这一点。我在下面列出了它们

方法1

<div class="row">
  <div class="col-12">
    <h3>Some Text</h3>
  </div>
  <div class="col-12">
    <button type="button">Some button</button>
  </div>
</div>

Method2（看起来使用了太多行列）

<div class="row">
  <div class="col">
    <div class="row">
        <div class="col">
            <h3>Some Text</h3>
        </div>
    </div>
  </div>
  <div class="col">
    <div class="row">
        <div class="col">
            <button type="button">Some button</button>
        </div>
    </div>
  </div>
</div>

方法3

<div>
    <div class="row">
        <div class="col">
            <h3>Some Text</h3>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <button type="button">Some button</button>
        </div>
    </div>
</div>

有人可以指导使用 row 和 col 执行此操作的正确方法吗？

【问题讨论】：

如果你想将它们堆叠在一起，你可以不使用 row 和 col 使用它们，否则第一种方法是可以的
我想用 row 和 col 来做
我认为你做得对
第二种方法怎么样。它看起来更通用
嵌套太多了，你应该避免，这是不必要的

标签： bootstrap-4

【解决方案1】：

“我想要一个 h3 标题和下面的按钮”

如果您没有其他要求并且不需要响应更改，那么“正确”的方法很简单..

<div class="row">
    <div class="col-12">
        <h3>Some Text</h3>
        <button type="button" class="btn btn-dark">Some button</button>
    </div>
</div>

标题是display:block，这样会自动强制按钮换行。如果您想使用单独的列，那么 方法 1 又是最佳选择，因为它最简单。

【讨论】：