如何使用Bootstrap调整布局实现Gate A按钮横向并排对齐

你的布局失效核心原因是btn-toolbar被放在了循环内部，每个按钮都单独被一组工具栏容器包裹，导致每个按钮都会独占一行无法并排，调整方案如下：

修改后代码 #

<section class="content float-top float-right"> 
  <h2>Gate A</h2>
  <div class="card ml-1" style="width: 35rem">
    <div class="p-3">
      <!-- btn-toolbar移到循环外部，所有按钮组放在同一个工具栏容器内 -->
      <div class="btn-toolbar flex-wrap gap-2" role="toolbar" aria-label="Gate A button toolbar">
        <?php foreach ($tamu as $tamu_item) : ?>
          <div class="btn-group" role="group">
            <button type="button" class="btn btn-success"><?php echo $tamu_item->gateA ?></button>
          </div>   
        <?php endforeach;?>
      </div>
    </div>
  </div>
</section>

补充说明 #

• 去掉了冗余的row容器，替换为简单的内边距类p-3，避免栅格系统默认样式干扰按钮排列
• 给btn-toolbar添加了flex-wrap类，按钮数量过多超出卡片宽度时会自动换行，不会溢出容器
• 如果你使用的是Bootstrap4版本没有gap-2类，删除gap-2后给每个btn-group添加mr-2 mb-2类即可实现相同的间距效果

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