引导程序中两列之间的垂直分割线

I am using twitter bootstrap, and have a row which has two columns (span6). How do I create a vertical divider between both the spans.

我正在使用twitter bootstrap，并且有一行有两个列(span6)。如何在两个跨度之间创建一个垂直分割线。

Thanks, Murtaza

谢谢,穆尔塔扎

8 个解决方案

#1

If your code looks like this:

如果你的代码是这样的:

<div class="row">
  <div class="span6">
  </div>
  <div class="span6">
  </div>
</div>

Then I'd assume you're using additional DIVS within the "span6" DIVS for holding/styling your content? So...

那么我假设你在“span6”DIVS中使用了额外的DIVS来保存/样式化你的内容?所以…

<div class="row">
  <div class="span6">
    <div class="mycontent-left">
    </div>
  </div>
  <div class="span6">
    <div class="mycontent-right">
    </div>
  </div>
</div>

So you could simply add some CSS to the "mycontent-left" class to create your divider.

因此，您可以简单地向“mycontent-left”类添加一些CSS来创建分隔符。

.mycontent-left {
  border-right: 1px dashed #333;
}

#2

.row.vertical-divider {
  overflow: hidden;
}
.row.vertical-divider > div[class^="col-"] {
  text-align: center;
  padding-bottom: 100px;
  margin-bottom: -100px;
  border-left: 3px solid #F2F7F9;
  border-right: 3px solid #F2F7F9;
}
.row.vertical-divider div[class^="col-"]:first-child {
  border-left: none;
}
.row.vertical-divider div[class^="col-"]:last-child {
  border-right: none;
}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row vertical-divider" style="margin-top: 30px">
  <div class="col-xs-6">Hi there</div>
  <div class="col-xs-6">Hi world<br/>hi world</div>
</div>

#3

Well here's another option which I've been using for some time now. It works great for me since I mostly need it do visually separate 2 cols. And it's also responsive. Which means that if I have columns next to each other in medium and large screen sizes, then I would use the class col-md-border, which would hide the separator on smaller screen sizes.

这是另一个选项我已经用了一段时间了。它对我来说非常有用，因为我通常需要它在视觉上区分两个cols。也是响应。这意味着，如果我在中、大屏幕大小的列之间相邻，那么我将使用coll -md-border类，它将分隔符隐藏在较小的屏幕大小上。

css:

css:

@media (min-width: 992px) {
    .col-md-border:not(:last-child) {
        border-right: 1px solid #d7d7d7;
    }
    .col-md-border + .col-md-border {
        border-left: 1px solid #d7d7d7;
        margin-left: -1px;
    }
}

In scss you can generate all needed classes probably from this:

在scss中，您可以从中生成所需的所有类:

scss:

scss:

@media(min-width: $screen-md-min) {
    .col-md-border {
        &:not(:last-child) {
            border-right: 1px solid #d7d7d7;
        }

        & + .col-md-border {
            border-left: 1px solid #d7d7d7;
            margin-left: -1px;
        }
    }
}

HTML:

HTML:

<div class="row">
    <div class="col-md-6 col-md-border"></div>
    <div class="col-md-6 col-md-border"></div>
</div>  

How it works:

它是如何工作的:

The cols must be inside an element where there are no other cols otherwise the selectors might not work as expected.

cols必须位于没有其他cols的元素中，否则选择器可能无法正常工作。

.col-md-border:not(:last-child) matches all but the last element before .row close and adds right border to it.

. cold -md-border:not(:last-child)匹配除最后一个元素之外的所有元素，并添加右边框。

.col-md-border + .col-md-border matches the second div with the same class if these two are next to each other and adds left border and -1px negative margin. Negative margin is why it doesn't matter anymore which column has greater height and the separator will be 1px the same height as the highest column.

. coll -md-border + . cole -md-border匹配第二个具有相同类的div，如果这两个div相邻，并添加左边框和-1px的负边距。负的边距就是为什么哪个列的高更大，分隔符的高度将是1px，和最高列的高度相同。

It does also have some problems...

它也有一些问题……

1. When you try to be clever/lazy and use col-XX-X class together with hidden-XX/visible-XX classes inside the same row element.
2. 当您试图变得聪明/懒惰时，使用colx - xx - x类和隐藏在同一行元素中的hidden-XX/ visi- xx类。
3. When you have a lot of columns and need a pixel perfect thing. Since it moves n-1 column 1px to the left.
4. 当你有很多列需要一个完美的像素。因为它向左侧移动n-1列1px。

... But on the other hand it's responsive, works great for simple html and it's easy to create these classes for all bootstrap screen sizes.

…但是另一方面，它是响应性的，对于简单的html非常有效，并且很容易为所有引导屏幕大小创建这些类。

#4

To fix the ugly look of a divider being too short when the content of one column is taller, add borders to all columns. Give every other column a negative margin to compensate for position differences.

要修复一个分割器的难看外观，当一个列的内容较高时，将边界添加到所有列中。给每一栏留出一个负值，以弥补位置上的差异。

For example, my three column classes:

例如，我的三个列类:

.border-right {
    border-right: 1px solid #ddd;
}
.borders {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    margin: -1px;
}
.border-left {
    border-left: 1px solid #ddd;
}

And the HTML:

HTML:

<div class="col-sm-4 border-right">First</div>
<div class="col-sm-4 borders">Second</div>
<div class="col-sm-4 border-left">Third</div>

Make sure you use #ddd if you want the same color as Bootstrap's horizontal dividers.

如果您希望使用与Bootstrap的水平分隔符相同的颜色，请确保使用#ddd。

#5

I have tested it. It works fine.

我已经测试了它。它将正常工作。

.row.vdivide [class*='col-']:not(:last-child):after {
      background: #e0e0e0;
      width: 1px;
      content: "";
      display:block;
      position: absolute;
      top:0;
      bottom: 0;
      right: 0;
      min-height: 70px;
    }

    <div class="container">
      <div class="row vdivide">
        <div class="col-sm-3 text-center"><h1>One</h1></div>
        <div class="col-sm-3 text-center"><h1>Two</h1></div>
        <div class="col-sm-3 text-center"><h1>Three</h1></div>
        <div class="col-sm-3 text-center"><h1>Four</h1></div>
      </div>
    </div>

#6

Well what I did was remove the gutter between the respective spans then drawing a left border for the left span and a right border for the right span in such a way that their borders overlapped just to give a single line. This way the visible line will just be one of borders.

我所做的就是移除各自跨度之间的沟槽然后为左跨度画一个左边界为右跨度画一个右边界，这样它们的边界就会重叠，只留下一条线。这样可见的线将只是一个边界。

CSS

CSS

.leftspan
{
padding-right:20px;
border-right: 1px solid #ccc;
}

.row-fluid .rightspan {
margin-left: -0.138297872340425%;
*margin-left: -0.13191489361702%;
padding-left:20px;
border-left: 1px solid #ccc;
}

.row-fluid .rightspan:first-child {
margin-left: -0.11063829787234%;
*margin-left: -0.104255319148938%;
}

HTML

HTML

  <div class="row-fluid" >
      <div class="span8 leftspan" >
      </div>

      <div class="span4 rightspan"  >
      </div>
 </div>

Try this it works for me

试试这个对我有用

#7

Must Open in Full Page to See Borders!

Added media width clauses in the CSS so there isn't any nasty borders on the mobile-friendly side of things. Hope this helps! This will resize to the length of the longest column. Tested on .col-md-4 and .col-md-6 and my assumption is it is compatible with the rest. No guarantees though.

在CSS中增加了媒体宽度条款，所以在移动友好的方面没有任何讨厌的边界。希望这可以帮助!这将调整到最长列的长度。在。cole -md-4和。cole -md-6上测试过，我的假设是它与其他的兼容。但不能保证。

JSFiddle

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>

#8

Use this, 100% guaranteed:-

使用这个,100%保证:-

vr {
  margin-left: 20px;
  margin-right: 20px;
  height: 50px;
  border: 0;
  border-left: 1px solid #cccccc;
  display: inline-block;
  vertical-align: bottom;
}