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

时间：2013-01-29 10:09:24

标签： html css twitter-bootstrap

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

谢谢， 穆尔塔扎

13 个答案:

答案 0 :(得分：77)

如果您的代码如下所示：

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

答案 1 :(得分：27)

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：14)

嗯，这是我现在已经使用了一段时间的另一种选择。它对我很有用，因为我主要需要它在视觉上分开2个cols。而且它也很敏感。这意味着如果我在中型和大型屏幕尺寸中彼此相邻的列，那么我会使用类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 之前的最后一个元素之外的所有元素都匹配，并为其添加右边框。

如果这两个div彼此相邻并且添加左边框和-1px负边距，则

.col-md-border + .col-md-border匹配具有相同类的第二个div。负边距是为什么它不再重要哪个列具有更高的高度，并且分隔符将是与最高列相同的高度1px。

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

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

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

答案 3 :(得分：10)

在Bootstrap 4中，可以使用实用程序类 static async Task Main(string[] args) { Portal_Connect.PLC = new Class_PLC[11]; if ((Configuration.Diagnostic)) { var process = new Process { StartInfo = new ProcessStartInfo { FileName = "dotnet ", Arguments = Directory.GetCurrentDirectory() + \\Diagnostic.dll", WorkingDirectory = Directory.GetCurrentDirectory(), UseShellExecute = false, RedirectStandardOutput = false, RedirectStandardError = false, CreateNoWindow = false } }; process.Start(); process.PriorityClass = ProcessPriorityClass.High; process.ProcessorAffinity = (IntPtr)6; } } 。

例如，您可以这样做：

border-right

答案 4 :(得分：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。

答案 5 :(得分：4)

通过 Bootstrap 4 ，您可以使用 boders ，而无需编写其他CSS。

左边框

如果要在内容和边框之间留出空间，可以使用填充。 （在本示例中，左侧填充为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>

答案 6 :(得分：3)

我测试了它。它工作正常。

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

答案 7 :(得分：3)

如果您仍在寻找2018年的最佳解决方案，那么我发现，如果您至少有一个免费的伪元素（:: after或:: before），则可以完美地实现这种方法。

您只需要像这样向您的行添加类：<div class="row 垂直分隔符 ">

并将其添加到您的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.

中查看其工作原理

答案 8 :(得分：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>

答案 9 :(得分：2)

如果要在两列之间使用垂直分隔线，只需添加

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

答案 10 :(得分：1)

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

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

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

答案 11 :(得分：0)

我所做的就是移除相应跨距之间的沟槽，然后绘制左边距的左边框和右边距的右边框，使其边框重叠，只是为了给出一条线。这样，可见线只是边界之一。

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>

试试这个对我有用

答案 12 :(得分：-3)

使用此，100％保证： - 

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