如何使用bootstrap实现此布局

Question

这是一行分成2列但是当我尝试将部分用红色圈出时，它与行的顶部对齐，进度条在中间不对齐。我已经看到代码可以创建自定义css来处理该区域，但我正在尝试使用bootstrap找到最简单的解决方案，同时尽可能少地创建自定义css。

这是我目前使用的代码。

Foo<A> & Foo<B>

Answer 1

您可以使用引导程序内置类 row 和 col 来执行此操作。您需要做的就是确定列结构。这是我构建的代码结构。

<div class="container">
   <div class="row">
     <div class="col-md-8"></div> <!-- left bar -->
     <div class="col-md-4"> <!-- right bar -->
        <div class="row">
           <div class="col-md-4">Coverage :</div>
           <div class="col-md-8"></div> <!-- progress bar -->
        </div>
        <div class="row">
           <div class="col-md-4">Premium :</div>
           <div class="col-md-8">$$$$$</div>
        </div>
     </div>
  </div>
</div>

Here is the working example我创建了测试此代码。对于其他对齐，我使用自定义css代码。