html - 如何使这条垂直线在一 block 的列之间移动？

Question

我试图让这条红线恰好位于列之间，恰好使其位于 Lorem ipsum 和段落之间。问题是它应该是穿过页面的一条长线，但是这一行因为新行而中断。有没有更好的方法来做到这一点……？

这是当前状态:http://codepen.io/anon/pen/WReerM

.content--border {
    border-right: 2px solid red;
}

<div class="container content">
  <div class="row">
    <div class="col-md-3 content--border">
      <p>Lorem ipsum</p>
    </div>
    <div class="col-md-7">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor!</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3 content--border">
      <p>Lorem ipsum 2</p>
    </div>
    <div class="col-md-7">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor! Lorem ipsum dolor sit
        amet, consectetur adipisicing elit. A asperiores, quisquam illo animi eaque repudiandae excepturi tenetur, vel laudantium quas corporis explicabo laborum non minus dolor temporibus nesciunt vero. Id!
      </p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3 content--border">
      <p>Lorem ipsum 3</p>
    </div>
    <div class="col-md-7">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor!</p>
    </div>
  </div>
</div>

Answer 1

最简单的方法是将 content--border 类移动到 col-md-7 而不是 col-md-3。