html - 引导程序中两列之间的垂直分隔线

Question

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

谢谢，穆尔塔萨

score 110 · Accepted Answer

如果您的代码如下所示：

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

然后我假设您在“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>

所以你可以简单地在“mycontent-left”类中添加一些 CSS 来创建你的分隔线。

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

score 47 · Accepted Answer

在 Bootstrap 4 中border-right，您可以使用实用程序类。

因此，例如，您可以这样做：

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

score 30 · Accepted Answer

.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="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/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>

score 15 · Accepted Answer

好吧，这是我已经使用了一段时间的另一个选项。它对我很有用，因为我主要需要它在视觉上分开 2 列。而且它也是响应式的。这意味着如果我在中型和大屏幕尺寸中的列彼此相邻，那么我将使用 class col-md-border，它将在较小的屏幕尺寸上隐藏分隔符。

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;
    }
}

在 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：

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

这个怎么运作：

cols 必须位于没有其他 cols 的元素内，否则选择器可能无法按预期工作。

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

.col-md-border + .col-md-border如果这两个彼此相邻，则匹配具有相同类的第二个 div 并添加左边框和 -1px 负边距。负边距是为什么哪一列的高度更大并且分隔符将与最高列的高度相同的 1px 不再重要。

它也确实存在一些问题...

当您尝试变得聪明/懒惰并在同一行元素内将col-XX-Xclass 与hidden-XX/ classes 一起使用时。visible-XX
当您有很多列并且需要像素完美的东西时。因为它将 n-1 列向左移动 1px。

...但另一方面，它是响应式的，非常适合简单的 html，并且很容易为所有引导屏幕尺寸创建这些类。

score 8 · Accepted Answer

当一列的内容较高时，要修复分隔线太短的丑陋外观，请为所有列添加边框。给每个其他列一个负边距以补偿位置差异。

例如，我的三列类：

.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;
}

和 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>

如果您想要与 Bootstrap 的水平分隔线相同的颜色，请确保使用 #ddd。

score 8 · Accepted Answer

使用Bootstrap 4，您可以使用边框，避免编写其他 CSS。

左边框

如果你想要内容和边框之间的空间，你可以使用padding。（在本例中，向左填充 4px）

PL-4

例子：

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="row">
      <div class="offset-6 border-left pl-4">First</div>
      <div class="offset-6 border-left pl-4">Second</div>
    </div>

score 6 · Accepted Answer

如果您在 2018 年仍在寻找最佳解决方案，我发现如果您至少有一个免费的伪元素（ ::after 或 ::before ），这种方式非常有效。

你只需要像这样向你的行添加类：<div class="row vertical-divider ">

并将其添加到您的 CSS 中：

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

具有此类的任何行现在将在其包含的所有列之间具有垂直分隔线...

您可以在此示例中看到它是如何工作的。

score 6 · Accepted Answer

如果您想要两列之间的垂直分隔线，您只需要添加

class="col-6 border-left"

到您的列 div-s 之一

但

在响应式设计的世界中，您有时可能需要让它消失。

解决方案消失<hr>+消失<div>+margin-left: -1px;

<div class="container">
  <div class="row">
    <div class="col-md-7">
      1 of 2
    </div>
    <div class="border-left d-sm-none d-md-block" style="width: 0px;"></div>
    <div class="col-md-5" style="margin-left: -1px;">
    <hr class="d-sm-block d-md-none">
      2 of 2
    </div>
  </div>
</div>

https://jsfiddle.net/8z1pag7s/

在 Bootstrap 4.1 上测试

score 4 · Accepted Answer

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

.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>

score 2 · Accepted Answer

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

在 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>

score 2 · Accepted Answer

假设您有一个列空间，这是一个选项。根据您的需要重新平衡列。

<div class="col-1">
    <div class="col-6 vhr">
    </div>
</div>

.vhr{
  border-right: 1px solid #333;
  height:100%;
}

score 0 · Accepted Answer

好吧，我所做的是移除各个跨度之间的排水沟，然后为左跨度绘制一个左边框，为右跨度绘制一个右边框，这样它们的边框重叠只是给出一条线。这样，可见线将只是边界之一。

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

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

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

试试这个它对我有用

score 0 · Accepted Answer

我在Bootstrap 3.3.7中寻找一个垂直分隔线，但默认情况下它们没有，所以我写了一个简单的单行 div 来为我完成这项工作。

看看它是否适合你。

<div style="display: inline;border-right: 1px solid gray; padding:0 5px;"></div>

感谢您的阅读。干杯。

score 0 · Accepted Answer

正如@WalterV 上面回答的那样，已更改为Bootstrap 5+：

<div class="row">
      <div class="offset-6 border-start border-5">First</div>
      <div class="offset-6 border-start border-5">Second</div>
</div>

score 0 · Accepted Answer

从 bootstrap v4 开始，您可以使用此代码

 <div class="row">
   <div class="col-6 span6 border-right">
      dummy content
   </div>
   <div class="col-6 span6">
      right div content
   </div>
 </div>

score 0 · Accepted Answer

Bootstrap V5 引入了放置在元素上的.vr 类。<div>如果需要，将其放置在<li>元素内以分隔元素内的<ul>元素。

<ul class="navbar-nav">
  <li>Element 1</li>
  <li>
    <div class="h-100 vr"></div>
  </li>
  <li>Element 2</li>
</ul>

注意：.navbar-nav类与导航栏相关，并设置包装元素正确显示垂直规则（分隔符）所需list-style的所有子元素的 css 属性。none<li>

score -1 · Accepted Answer

使用这个，100% 保证：-

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

html - 引导程序中两列之间的垂直分隔线

17 回答 17

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

Related

Reference