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。

Answer 2

您可以将边框移动到col-md-7的左边缘。

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

也可以将它放在媒体查询中，以便它在较小的屏幕上消失：

@media screen and (min-width: 992px) {
  .content--border {
     border-left: 2px solid red;
  }
}

Demo here

Answer 3

将边框移动到其他列的左侧：

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

查看我的工作代码：

http://codepen.io/egerrard/pen/pRzzRx

Answer 4

您可以使用父元素:before的伪元素（.container）绘制此行。无论两列中的内容长度如何，这都允许没有任何中断的直线。

注意： 请以完整页面模式查看演示。

必要的CSS：

.container {
  position: relative;
}

@media (min-width: 992px) {
  .container:before {
    position: absolute;
    margin-left: -2px;
    background: red;
    display: block;
    content: '';
    width: 2px;
    bottom: 0;
    left: 25%;
    top: 0;
  }
}

＆＃13;

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

.container {
  position: relative;
}

@media (min-width: 992px) {

  .container:before {
    position: absolute;
    margin-left: -2px;
    background: red;
    display: block;
    content: '';
    width: 2px;
    bottom: 0;
    left: 25%;
    top: 0;
  }

}

＆＃13;

<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 class="row">
    <div class="col-md-3 content--border">
      <p>Lorem ipsum 3 Lorem ipsum 3 Lorem ipsum 3 Lorem ipsum 3 </p>
    </div>
    <div class="col-md-7">
      <p>Lorem ipsum dolor sit amet,</p>
    </div>
  </div>
</div>

＆＃13;

Answer 5

HTML：

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

CSS：

<a ng-href="#!/rubric/{{ data }}">link</a>

Answer 6

制作div元素并使用绝对定位将它放在它们之间会更容易，给div一个高度并使用其边距或左上角属性进行操作并将其放置在您想要的位置，也将它全部包含在div中......

如何使这条垂直线在一列之间进行？

6 个答案: