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

Question

提问by murtaza52

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

谢谢，穆尔塔扎

Answer 1

回答by Billy Moat

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

Answer 2

回答by Santirisco

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

Answer 3

回答by pgmank

In Bootstrap 4 there is the utility class border-rightwhich you can use.

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

So for example you can do:

例如，你可以这样做：

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

Answer 4

回答by Artur K?pp

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.

好吧，这是我已经使用了一段时间的另一种选择。它对我很有用，因为我最需要它在视觉上将 2 列分开。它也是响应式的。这意味着，如果我在中等和大屏幕尺寸中都有相邻的列，那么我会使用 class col-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 closeand adds right border to it.

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

.col-md-border + .col-md-bordermatches 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.

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

It does also have some problems...

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

When you try to be clever/lazy and use col-XX-Xclass together with hidden-XX/visible-XXclasses inside the same row element.
When you have a lot of columns and need a pixel perfect thing. Since it moves n-1 column 1px to the left.

当您尝试聪明/懒惰并在同一行元素内将col-XX-Xclass 与hidden-XX/ visible-XXclasses一起使用时。
当你有很多列并且需要一个像素完美的东西时。因为它将 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，并且很容易为所有引导屏幕尺寸创建这些类。

Answer 5

回答by Becca

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。

Answer 6

回答by Banana Developer

If you are still seeking for the best solution in 2018, I found the way this works perfectly if you have at least one free pseudo element( ::after or ::before ).

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

You just have to add class to your row like this: <div class="rowvertical-divider">

你只需要像这样在你的行中添加类：<div class="rowvertical-divider">

And add this to your CSS:

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

Any row with this class will now have vertical divider between all of the columns it contains...

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

You can see how this works in this example.

你可以在这个例子中看到它是如何工作的。

Answer 7

回答by Chiranjit Ghosh

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>

Answer 8

回答by Yevgeniy Afanasyev

If you want a vertical divider between 2 columns, all you need is add

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

class="col-6 border-left"

to one of your column div-s

到您的列 div-s 之一

BUT

但

In the world of responsive design, you may need to make it disappear sometimes.

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

The solution is disappearing <hr>+ disappearing <div>+ margin-left: -1px;

解决方案正在消失<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/

tested on Bootstrap 4.1

在 Bootstrap 4.1 上测试

Answer 9

回答by Matthew Zackschewski

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 中添加了媒体宽度子句，因此在移动友好方面没有任何令人讨厌的边界。希望这可以帮助！这将调整为最长列的长度。在 .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 10

回答by Jacob Paine

Assuming you have a column space, this is an option. Rebalance the columns depending on what you need.

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

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

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

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

提问by murtaza52

回答by Billy Moat

回答by Santirisco

回答by pgmank

回答by Artur K?pp

回答by Becca

回答by Banana Developer

回答by Chiranjit Ghosh

回答by Yevgeniy Afanasyev

回答by Matthew Zackschewski

Must Open in Full Page to See Borders!

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

回答by Jacob Paine

相关推荐

最近更新

标签

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

提问by murtaza52

回答by Billy Moat

回答by Santirisco

回答by pgmank

回答by Artur K?pp

回答by Becca

回答by Banana Developer

回答by Chiranjit Ghosh

回答by Yevgeniy Afanasyev

回答by Matthew Zackschewski

Must Open in Full Page to See Borders!

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

回答by Jacob Paine

相关推荐

Html href 语法：文件名中是否可以有空格

Html 将跨度视为输入元素

Html 有人可以解释 HTML5 aria-* 属性吗？

Html HTML5 数据库和 localStorage 可以跨子域共享吗？

相关推荐

最近更新

标签