html - 使用边框顶部的 CSS Bootstrap 行分隔

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) 分隔。您可能会注意到，边框与文本没有完全对齐。由于 bootstrap 边距，存在 15px 的错位。

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

请注意，每行中的两个文本元素将在移动设备屏幕上依次显示。在这种情况下，每一行之间应该只有一个边框，如示例所示。

谢谢。

Answer 1

它与 Bootstrap 中类 col- 的 div 的 padding 有关。

你可以添加:

.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>