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>

上述代码应输出this image。

enter image description here

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

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

我建议2个角度来解决这个问题：边框或行背景。这是demo (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 5

扩展user2136179提供的CSS，你也可以做底部边框。它需要使用matchHeight，但可以让你的Bootstrap Grid看起来像一个表格。 Check it out

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

Answer 6

我认为你可以设置左列是48％宽度，右边是48％宽度，中间2％div是重复背景。你必须自己处理它

Answer 7

Bootstrap 4现在带有border utility classes。因此，如果您使用的是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>

如何使用Twitter Bootstraps网格系统在两列之间添加一行

7 个答案: