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

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 中添加了媒体宽度子句，因此在 mobile-friendly 一侧没有任何讨厌的边框。希望这可以帮助！这将调整为最长列的长度。在 .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

我同意前面的，但我想添加一个解决方案。

您可以使用列属性，如果这样做，有一个 column-rule 选项，可以在列之间完美地添加一条线。 Here 您可以阅读示例并了解我的意思。

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

How do I add a vertical line separating the two columns?

html

css

twitter-bootstrap-3

必须全页打开才能看到边框！