如何整理布局以使其对齐 - Bootstrap答案

【问题标题】：How to tidy up the layout so that it aligns - Bootstrap如何整理布局以使其对齐 - Bootstrap
【发布时间】：2021-11-18 06:45:35
【问题描述】：

所以，我想把门A并排放置，我使用bootstrap

像这样 enter image description here

此代码：

  <section class="content float-top float-right"> 
<h2>Gate A</h2>
<div class="card ml-1" style="width: 35rem">
  <div class="row ml-3 mt-3 mb-3 mr-3">

    <?php
      foreach ($tamu as $tamu_item) : 
    ?>

    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
      <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-success"><?php echo $tamu_item->gateA ?></button>
      </div>   
    </div>
   <?php endforeach;?>
  </div>
</div>
</section>

【问题讨论】：

标签： twitter-bootstrap codeigniter bootstrap-4 layout

【解决方案1】：

只需使用bootstrap's grid system

每个门都在这样的列内：

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <section class="content float-top float-right">
                <h2>Gate A</h2>
            </section>
            <!-- other elements -->
        </div>
        <div class="col-md-6">
            <section class="content float-top float-right">
                <h2>Gate B</h2>
            </section>
             <!-- other elements -->
        </div>
    </div>
</div>

【讨论】：