Question

正如您在图像中看到的，我使用的是bootstrap 3网格系统，这些是2列，位于同一行，但它们没有对齐。我希望他们向用户清楚他们处于同一级别，并且截至目前，它看起来令人困惑。有人可以帮助我吗？

由于

http://i.imgur.com/PFIE1oh.jpg

Bootstrap代码

<div class="col-sm-4 col-lg-4">
  <div class="row">
     <div class="col-sm-6 ">
         <h3>Total</h3>
     </div>
     <div class="col-sm-6 ">
         <h3>$1,618.20</h3>
     </div>
  </div>
</div>

Answer 1

它对我来说很好，它的对齐只是正确的

实际上class row，col不包含margin-bottom或padding-bottom

在<div class="col-sm-6 ">内使用<h3>分配值，或者您也可以使用任何其他标记。在该分配标记中使用style="margin-bottom:0px;padding-bottom:0px;" 这可以解决您的问题

喜欢这个

<div class="col-sm-4 col-lg-4">
  <div class="row">
     <div class="col-sm-6 ">
         <h3 style="margin-bottom:0px;padding-bottom:0px;">Total</h3>
     </div>
     <div class="col-sm-6 ">
         <h3 style="margin-bottom:0px;padding-bottom:0px;">$1,618.20</h3>
     </div>
  </div>
</div>

或者您可以使用此课程

h3 {
margin-bottom:0px;
padding-bottom:0px;
}

希望这可能有用

Bootstrap 3网格，对齐同一行中的列

1 个答案: