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

Posted 2023-03-05

【中文标题】引导程序中两列之间的垂直分隔线

【英文标题】：vertical divider between two columns in bootstrap

【发布时间】：2013-01-12 20:56:12

【问题描述】：

我正在使用 twitter 引导程序，并且有一排有两列 (span6)。如何在两个跨度之间创建垂直分隔线。

谢谢， 穆尔塔萨

【问题讨论】：

我做了一个不需要额外元素的版本：***.com/questions/11815081/…

【参考方案1】：

如果您的代码如下所示：

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

【讨论】：

上面的问题是边框在第一个跨度中粘在我的内容上。在第一个跨度中，我有一个表单，边框正在拥抱它的内容。我怎样才能把它分开？

简单 - 为 content-left 和 content-right DIVS 添加一些填充。

如果右边<span>的内容高于左边的内容就会出现问题。在这种情况下，垂直线会很难看。

如果列的高度不同，您可以通过在 CSS 中为容器 div 和包含每一列的 divs 设置 min-height: 100%; height: 100%; 来使行一直向下运行。

@raul 我相信只有在您使用 flexbox 时才有效。如果您在 col-* div 上使用浮点数，那么这将不起作用。

【参考方案2】：

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

例如你可以这样做：

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

【讨论】：

如何让这个边框占据100%的高度？

怎么增加厚度，总之太淡了

【参考方案3】：

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

【讨论】：

使用 '+' 选择器，你不需要第一个和最后一个子类：.row.vertical-divider div[class^="col-"] + div[class^="col-"] text-align: center; padding-bottom: 100px; margin-bottom: -100px; border-left: 3px solid #0396D1;

这个解决方案是最好的

【参考方案4】：

这是我已经使用了一段时间的另一个选项。它对我很有用，因为我最需要它在视觉上分开 2 列。而且它也是响应式的。这意味着，如果我在中等和大屏幕尺寸中的列彼此相邻，那么我将使用 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>  

工作原理：

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

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

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

它也确实有一些问题......

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

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

【参考方案5】：

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

比如我的三列类：

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

【讨论】：

我喜欢这个解决方案，但它仅适用于三列或更多列。如果你只想要两个怎么办？你中间的“.borders” div 不会在那里调整边距。

【参考方案6】：

使用 Bootstrap 4，您可以使用 borders，避免编写其他 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>

【讨论】：

对于 Bootstrap 5.0+ 是：<div class="row"> <div class="offset-6 border-start border-5">First</div> <div class="offset-6 border-start border-5">Second</div> </div>

【参考方案7】：

如果您在 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;

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

您可以在 this example. 中查看其工作原理

【讨论】：

省略 [class*='col-'] 中的 - (to [class*='col']) 以实现 bootstrap 4 与类“col”的兼容性

只是一条评论“由于显示，属性被忽略。使用'display：inline'，宽度，高度，margin-top，margin-bottom和float属性没有效果。css”

【参考方案8】：

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

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 上测试

【讨论】：

这是绝对有效的解决方案！谢谢你，兄弟！

【参考方案9】：

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

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

【讨论】：

作品，完全按照需要，也应该解释你做了什么。

绝对完美，并且完全响应 - 即使列堆叠在较小的屏幕上，边框也会消失，如您所愿！一个非常简单的解决方案，谢谢！ :)

不工作，正确的分隔符还在，看这里：jsfiddle.net/k4uavbtz

适用于 3 列以上。仅使用两列时，分隔符遵循左列的高度。因此，如果右栏较长，边框将不够高。

【参考方案10】：

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

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

【参考方案11】：

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

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

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

【参考方案12】：

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

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>

试试这个对我有用

【讨论】：

当 2 个 div 的高度不同时，这很难看。

【参考方案13】：

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

看看它是否适合你。

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

感谢您的阅读。干杯。

【参考方案14】：

正如@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>

【参考方案15】：

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

【参考方案16】：

使用这个，100% 保证：-

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