我如何使用Twitter自举电网系统中增加两列之间的线(How can I add a line b

两个栏布局在中间线。

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

Answer 1:

我觉得我得到了你的问题的权利......这下面的代码。 下面的内嵌样式仅仅是为了说明。 您在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 2:

我的解决方案采用了: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 3:

基于@Ross安格斯解决办法，我找到了一种方法，以适应高度。 只需将每个列的每个人的边界上。

.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角攻击这个问题：边界或行背景。 这里是演示（的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，但可以让你的引导网格看上去就像一个表格。 看看这个

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

Answer 6:

我想你可以设置左栏是48％的宽度，右边是48％的宽度和反复后台中心2％股利。 你必须自己处理

Answer 7:

引导4现在带有边框的实用工具类 。 所以，如果你使用的是引导4，你可以用在需要它们的列这些类。 例如，如果你想要列A和B柱之间的边界，你将添加border-right A列级

这里是一个演示：

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

文章来源: How can I add a line between two columns using Twitter Bootstraps grid system