如何添加分隔两列的垂直线？

Question

我需要能够用垂直线分隔两列：

<div class="container">
   <div class="row">
    <div class="col-md-6">
    <p>some text here </p>
     </div>
    <div class="col-md-6">
    <p>some more text here</p>
     </div>
   </div>
  </div>  

Answer 1

使用css border-right:1px solid black来实现这一目标。这里演示：http://jsfiddle.net/swm53ran/35/

HTML：

<div class="container">
    <div class="row">
        <div class="col-md-6 border-right">
            <p>some text here </p>
        </div>
        <div class="col-md-6">
            <p>some more text here</p>
        </div>
    </div>
</div>

CSS

.border-right {
    border-right: 1px solid black;
}

Answer 2

必须在整页中打开以查看边框！

在CSS中添加了媒体宽度子句，因此在移动设备友好方面没有任何讨厌的边框。希望这可以帮助！这将调整为最长列的长度。测试.col-md-4和.col-md-6，我的假设是它与其余部分兼容。但不保证。

JSFiddle

.row {
  overflow: hidden;
}

.cols {
  padding-bottom: 100%;
  margin-bottom: -100%;
  overflow: hidden;
}

@media(min-width: 992px) {
  .col-md-4:not(:first-child), 
  .col-md-6:not(:first-child) {
    border-left: 1px solid black;
  }
  .col-md-4:not(:last-child),
  .col-md-6:not(:last-child) {
    border-right: 1px solid black;
    margin-right: -1px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <h1>
    .col-md-6
  </h1>
  <hr>
  <div class="row text-center">
    <div class="col-md-6 cols">
      <p>Enter some text here</p>
    </div>
    <div class="col-md-6 cols">
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
    </div>
  </div>
  <hr>
  <h1>
    .col-md-4
  </h1>
  <div class="row text-center">
    <div class="col-md-4 cols">
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
    </div>
    <div class="col-md-4 cols">
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
    </div>
    <div class="cols col-md-4 cols">
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
    </div>
  </div>
</div>

Answer 3

我同意之前的观点，但我想再增加一个解决方案。

您可以使用columns属性，如果这样做，则会有一个column-rule选项，可以在列之间完美地添加一行。 Here你可以阅读并看看我的意思。