Bootstrap如何实现将按钮放置在col栅格列的右下角

直接用Bootstrap原生自带的Flex工具类就能实现，不需要写额外自定义CSS，适配Bootstrap 4、5全版本。

具体修改步骤 #

• 定位到包裹按钮的栅格列：即代码里<div class="col-sm bg-danger">这一层，给它追加三个工具类：
  • d-flex：将当前列设置为flex弹性容器
  • justify-content-end：让容器内的内容水平方向靠右对齐
  • align-items-end：让容器内的内容垂直方向靠下对齐
• 删除原来包裹按钮的冗余<p class="ml-auto">标签，直接把按钮放在该栅格列内部即可。如果需要调整按钮和列边缘的间距，给按钮追加m-2/mb-2 me-2这类Bootstrap内置间距类就行，避免按钮贴死边框影响视觉效果。

修改后完整代码 #

<div class="container-fluid m-0">
<div class="d-flex bg-secondary m-0 rounded">     
  <div class="container">
   <div class="row">
     <div class="col-sm bg-info">
        <div>
        </div>
     </div>
    <div class="col-sm">
       <h3> Username</h3>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor leo, iaculis eu rhoncus quis</p>
       <p>xxx Followers . xxx Following</p>
    </div>
    <div class="col-sm bg-danger d-flex justify-content-end align-items-end">
      <!-- 需要边距时可替换为带间距类的按钮写法：<button type="button" class="btn btn-primary mb-2 me-2">Cancel</button> -->
      <button type="button" class="btn btn-primary">Cancel</button>
    </div>
    </div>
   </div>
</div>

目标位置参考 #

按钮目标放置位置示意图

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