grid - 如何使用 Twitter Bootstraps 网格系统在两列之间添加一条线

Question

两列布局，中间有一条线。

[                      ] | [                      ]
[                      ] | [                      ]
[                      ] | [                      ]
[     Left Column      ] | [    Right Column      ]
[                      ] | [                      ]
[                      ] | [                      ]
[                      ] | [                      ]
[                      ] | [                      ]

Answer 1

我的解决方案使用:before伪元素在列之间放置一个定位元素。这不再需要任何 HTML 元素，只会应用于类的直接子.col-*元素.border-between。这应该应用于与 相同的元素.row。

HTML

<div class="row border-between">
  <p class="col-sm-6">This column does not have a border, because it's a first child.</p>
  <p class="col-sm-6">This column has a border to the left</p>
</div>

CSS

.border-between > [class*='col-']:before {
   background: #e3e3e3;
   bottom: 0;
   content: " ";
   left: 0;
   position: absolute;
   width: 1px;
   top: 0;
}

.border-between > [class*='col-']:first-child:before {
   display: none;
}

Answer 2

我想我的问题是正确的......这是下面的代码。下面的内联样式仅用于说明。您在 css 文件中应用您的样式。

<div class="container">
    <div class="row-fluid">
        <div class="span6" style="padding-right:20px; border-right: 1px solid #ccc;">
            <p>Some Contents Here...</p>
        </div>

        <div class="span6">
            <p>Some Contents Here...</p>
        </div>
    </div>
</div>

上面的代码应该输出这个图像。

Answer 3

基于@Ross Angus 解决方案，我找到了一种适应高度的方法。只需将每列的边界放在彼此的顶部。

.grid--borderBetween > [class*='col-']:before,
.grid--borderBetween > [class*='col-']:after {
    background: #b2b2b2;
    bottom: 0;
    content: " ";
    position: absolute;
    width: 1px;
    top: 0;
}
.grid--borderBetween > [class*='col-']:before {
    left: 0;
}
.grid--borderBetween > [class*='col-']:after {
    right: -1px;
}
.grid--borderBetween > [class*='col-']:first-child:before,
.grid--borderBetween > [class*='col-']:last-child:after {
    display: none;
}

Answer 4

Bootstrap 4 现在带有边界实用程序类。因此，如果您使用的是 Bootstrap 4，您可以在需要它们的列上使用这些类。例如，如果您想要 A 列和 B 列之间的边界，您可以在 A 列border-right上添加类。

这是一个演示：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="container">
  <div class="row text-center">
    <div class="col border-right">
      Column A
    </div>
    <div class="col">
      Column B
      <br>
      <br>
      <br>
      Additional content demonstrating that the border stretches to accommodate the height of both columns.
    </div>
  </div>
</div>

Answer 5

基于非常相似的答案：https ://stackoverflow.com/a/11299934/1478467

我建议从 2 个角度来解决这个问题：边框或行背景。这是演示（jsfiddle）。

在背景选项的示例下方，唯一的缺点是您无法真正控制线条的宽度，除非您使用复杂的背景。

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

/* Put here the background (color, images, etc.) that you want between the columns */
.row.myBackground { background: #F00; }
/* This is the column background, for example white as the page background */
.row.myBackground > [class*="span"] { background: blue; }

Answer 6

扩展 user2136179 提供的 CSS，还可以做下边框。它需要使用 matchHeight 但可以让您的 Bootstrap Grid 看起来像一个表格网格。看看这个

// See the rest on codepen.io
$(".border-bottom").children("div").matchHeight();

Answer 7

我认为您可以将左列设置为 48% 宽度，右列设置为 48% 宽度，中心 2% div 具有重复背景。你必须自己处理