求助：Bootstrap按钮已同宽但无法同行（PHP/CodeIgniter项目）

嘿，我完全懂你现在的困扰——明明把两个按钮的宽度调一致了，可它们就是没法乖乖待在同一行，试过btn-group inline和表格布局都没达到预期效果对吧？结合你用Bootstrap+CodeIgniter做个人资料模块的场景，给你几个针对性的解决方案：

1. 用Bootstrap原生按钮组（btn-group）的正确写法 #

你之前可能对btn-group的用法有点小误解，不需要额外加inline类，直接把两个按钮放在同一个btn-group容器里，再配合Bootstrap的宽度类就能实现宽度一致且同行：

<div class="btn-group" role="group" aria-label="操作按钮组">
  <button type="button" class="btn btn-primary w-100">编辑资料</button>
  <button type="button" class="btn btn-secondary w-100">重置密码</button>
</div>

这里的w-100会让每个按钮占满所在容器的宽度，而btn-group会自动把按钮设置为inline-block并排列在一行，完美解决你的需求。

2. 用Bootstrap栅格系统实现更灵活的布局 #

如果你的按钮需要放在独立的容器里（比如后续要加其他元素），用栅格的row+col组合更合适，既能保证同行，又能轻松控制宽度比例：

<div class="row g-2">
  <div class="col">
    <button type="button" class="btn btn-primary w-100">编辑资料</button>
  </div>
  <div class="col">
    <button type="button" class="btn btn-secondary w-100">重置密码</button>
  </div>
</div>

g-2是设置列之间的间距，col会自动平分父容器宽度，按钮加w-100就能保证宽度完全一致。

3. 排查可能的CSS冲突问题 #

如果上面两种方法都没生效，大概率是自定义CSS或者其他样式覆盖了Bootstrap的默认样式：

• 检查按钮的display属性，是不是被改成了block（block元素会独占一行）；
• 看看有没有给按钮加了float属性，导致布局混乱；
• 检查父容器的宽度是不是不够，导致按钮被迫换行。

可以用浏览器的开发者工具（F12）查看按钮的样式，找到冲突的规则后调整优先级或者修改样式。

另外，表格布局其实也能实现，但Bootstrap本身对表格有样式重置，而且表格布局在响应式场景下不如原生组件灵活，所以更推荐上面两种方法哦~

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