CodeIgniter 3中如何单行展示循环数据 实现Bootstrap酒店房间列表

你当前代码的问题是将btn-toolbar容器写在了循环内部，每次循环都会生成一个独立的块级工具栏元素，自然会逐行显示。核心改动是将btn-toolbar容器从循环内移到循环外，循环仅生成每组按钮即可，修改后代码如下：

<h2>Gate A</h2>
<!-- 工具栏容器放在循环外部，所有按钮组都放在同一个容器内，自然同行排列 -->
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <?php
      $no = 1;
      foreach ($tamu as $tamu) : 
  ?>
    <div class="btn-group mr-2 mb-2" role="group" aria-label="Room button group">
      <button type="button" class="btn btn-success"><?php echo $tamu->gateA ?></button>
      <button type="button" class="btn btn-secondary">3</button>
      <button type="button" class="btn btn-secondary">4</button>
    </div>
  <?php endforeach;?>
</div>

额外优化说明：

• 给btn-group新增了mb-2类，避免按钮数量过多自动换行时，上下行没有垂直间距
• 如果需要强制所有按钮在同一行不换行，可给btn-toolbar添加flex-nowrap类，同时给外层父容器添加overflow-x: auto属性实现横向滚动即可

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