Bootstrap4实现h3标题与下方按钮布局的row、col正确用法问询

方法1是三种方案里最符合Bootstrap4栅格规范、简洁性和可维护性最优的实现。

基础规范说明 #

Bootstrap4栅格系统有明确的使用规则：

• row 的直接子元素只能是带col系列类的元素
• col 必须嵌套在row内部使用，不能单独作为父容器的直接子元素
• 尽量减少无意义的嵌套层级，避免冗余DOM节点

三个方案的具体分析 #

• 方法1
  完全符合规范：外层一个row包裹两个col-12，每个col-12占满整行宽度，刚好实现标题在上、按钮在下的上下堆叠布局，没有多余嵌套。如果后续需要调整响应式表现，比如中等屏幕以上改为标题左、按钮右的并排布局，只需要把col-12修改为col-md-6之类的类即可，扩展性极强。
  代码示例：

  <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
  属于典型的过度嵌套错误用法：多层无意义的row和col嵌套，不仅增加冗余DOM节点，还会叠加col默认的左右内边距，导致布局间距异常，同时默认会让标题和按钮左右并排，完全不符合上下布局的需求，完全不推荐使用。
• 方法3
  虽然能实现效果，但不符合简洁性要求：外层的普通div没有存在意义，两个独立的row也增加了不必要的DOM层级，后续调整布局的灵活性也不如方法1，属于可用但不推荐的写法。

额外优化提示 #

如果你的场景不需要后续做响应式的并排布局调整，完全不需要使用栅格系统，h3本身就是块级元素，直接写<h3>Some Text</h3><button type="button">Some button</button>就能实现上下布局，代码更简洁。

内容的提问来源于stack exchange，提问作者Santhosh