Question

请咨询以下摘要：

.box {
  color: #000;
}
.pt {
  margin-top: 20px;
}
.element {
  border-top: 3px solid #ff0000;
}
.p-20{
  padding:20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="p-20">
  <!-- REPEATING ELEMENT -->
  <div class="row element">
    <div class="col-sm-6">
      <div class="box">
        ELEMENT
      </div>
    </div>
    <div class="col-sm-6">
      <div class="box">
        ELEMENT
      </div>
    </div>
  </div>
  <!-- REPEATING ELEMENT -->
  <div class="row element">
    <div class="col-sm-6">
      <div class="box">
        ELEMENT
      </div>
    </div>
    <div class="col-sm-6">
      <div class="box">
        ELEMENT
      </div>
    </div>
  </div>
  <!-- REPEATING ELEMENT -->
  <div class="row element">
    <div class="col-sm-6">
      <div class="box">
        ELEMENT
      </div>
    </div>
    <div class="col-sm-6">
      <div class="box">
        ELEMENT
      </div>
    </div>
  </div>
</div>

有三个样本行由红色边框（border-top）分隔。您可能会注意到，边框与文字不完全对齐。由于自助运营利润率导致15px的贬值。

使用bootstrap将边框与文本对齐的最简单方法是什么？

请考虑每行中的两个文本元素将在移动屏幕上一个在另一个下方显示。在这种情况下，每行之间应该只有一个边框，如示例所示。

感谢。

Answer 1

它与引导程序中padding的{{1}} div类col-有关。

你可以添加：

.col-sm-6 {
    padding-left: 0 !important;
}

.box {
  color: #000;
}
.pt {
  margin-top: 20px;
}
.element {
  border-top: 3px solid #ff0000;
}
.p-20{
  padding:20px;
}
.col-sm-6 {
    padding-left: 0 !important;
}

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="p-20">
  <!-- REPEATING ELEMENT -->
  <div class="row element">
    <div class="col-sm-6">
      <div class="box">
        ELEMENT
      </div>
    </div>
    <div class="col-sm-6">
      <div class="box">
        ELEMENT
      </div>
    </div>
  </div>
  <!-- REPEATING ELEMENT -->
  <div class="row element">
    <div class="col-sm-6">
      <div class="box">
        ELEMENT
      </div>
    </div>
    <div class="col-sm-6">
      <div class="box">
        ELEMENT
      </div>
    </div>
  </div>
  <!-- REPEATING ELEMENT -->
  <div class="row element">
    <div class="col-sm-6">
      <div class="box">
        ELEMENT
      </div>
    </div>
    <div class="col-sm-6">
      <div class="box">
        ELEMENT
      </div>
    </div>
  </div>
</div>

Answer 2

有两种方法可以实现这一目标：

从.element divs
保留.row div，但删除.element。然后将col-sm-6 div包含在 new .element div 里面 .row

使用border top的CSS Bootstrap行分离

2 个答案: