如何使用引导程序水平对齐多个项目？答案

【问题标题】：How can I align several items horizontally using bootstrap?如何使用引导程序水平对齐多个项目？
【发布时间】：2021-03-26 00:47:17
【问题描述】：

我尝试通过使用两列并将文本、图标和行定位在左列中并将其他文本定位在右列中来对齐多个项目，但它们没有正确对齐。它目前看起来像this，但它应该看起来像附加的picture。我该如何解决这个问题？

<div class="col-12">
  <h1 class="orange">LET'S RUB IT IN</h1>
  <h2>How Much?</h2>
</div>

<div class="col-6"> <!--left column-->
  <div class="circle side">
    <img src="./chemical@2x.png" alt="chemical" class="icon">  
  </div>
  <h5 class="side">1 Shot Glass<br>or 1 oz.</h5>
  <div class="line v side"></div> <!--vertical line-->
</div>

<div class="col-6"> <!--right[enter image description here][1] column-->
  <p>To fully cover your body, you'll need about 1 ounce of sunscreen or just enough to fill a shot glass.</p>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

看起来问题是您没有使用.container > .row > .col 约定。您跳过了.container，有时也跳过了.row。此外，您没有在屏幕截图中显示的部分使用网格。

当存在 Bootstrap 问题时，请参阅 Bootrap 文档。 https://getbootstrap.com/docs/5.0/layout/grid/

第一件事是您应该将所有/大部分<body> 内容包装在<div class="container-fluid"> 中。
然后添加任何缺少的.rows。

这就是你所拥有的：

这是你应该拥有的：

编写下一部分的内容以匹配您的设计。

例如

<div class="row">
   <div class="col-sm-6">
      <div class="row">
         <div class="col-6" style="border-right: 2px solid orange;">
            <div class="circle side" data-sr-id="9" style="visibility: visible; opacity: 1; transition: opacity 2s cubic-bezier(0.5, 0, 0, 1) 0s;">
               <img src="./chemical@2x.png" alt="chemical" class="icon">  
            </div>
         </div>
         <div class="col-6">
            <h5 class="side">1 Shot Glass<br>or 1 oz.</h5>
            <div class="line v side"></div>
         </div>
      </div>
   </div>
   <div class="col-sm-6">
      <p>To fully cover your body, you'll need about 1 ounce of sunscreen or just enough to fill a shot glass. </p>
   </div>
</div>

【讨论】：

【解决方案2】：

您可以参考 Bootstrap Grid System 这里：https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp 它会解决你的问题

【讨论】：