bootstrap4:在这种情况下使用行和列的正确方式

Question

我正在使用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>

方法2(看起来使用了太多行列(

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

有人能用行和列来指导哪种方法是正确的吗？

Answer 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再次是最佳选择，因为它是最简单的。