Bootstrap表单Button在576-768px小屏下溢出div问题咨询

问题根因 #

• 你使用的col-sm-6断点生效区间就是576px~767px，此区间内两个列各占50%宽度，列本身的可用宽度有限
• 按钮添加了m-2类，会给上下左右四个方向都加0.5rem的外边距，左右外边距叠加按钮本身的内容、内边距、边框宽度后，总宽度超过了父容器的可用宽度，就会出现溢出
• 代码末尾多了一个冗余的</div>闭合标签，可能引发部分浏览器的布局解析异常

修复方案 #

1. 调整按钮的外边距类：把m-2替换为my-2，仅保留上下外边距，去掉会撑宽的左右外边距，修改后按钮类为：

<button type="submit" class="btn btn-primary mb-2 my-2">Send my cheatsheet</button>

如果不需要额外上下间距，直接删掉m-2保留原有mb-2即可。
2. 给按钮添加w-100类，让按钮自动适配父容器宽度，需要文字居中的话可以再加text-center：

<button type="submit" class="btn btn-primary mb-2 m-2 w-100 text-center">Send my cheatsheet</button>

3. 删掉代码末尾冗余的</div>标签，保证DOM结构正常。
4. 如果确实需要保留按钮两侧的间距，不要给按钮加水平margin，改成给包裹按钮的父div加水平内边距即可，内边距不会撑出父容器范围：

<div class="mb-3 px-2">
  <button type="submit" class="btn btn-primary mb-2">Send my cheatsheet</button>
</div>

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