Bootstrap 3：网格内的边框高度错误

Question

我正在使用bootstrap 3网格系统，并希望在两个网格列之间创建一个边框。

这是我的代码：

<div class="row">    
    <div class="col-lg-2" style="border-right:1px solid #CCC">
       some content
    </div>
    <div class="col-lg-10">
       more content<br />more content<br />more content
    </div>
</div>

列之间的边界将仅与左列一样高，而不是与整行一样高。我希望它扩展到整行高度，就像真正的<table>一样。

看一下这个例子：

图像的第二部分是我想要实现的目标。

任何想法如何解决这个问题？

Answer 1

您可以添加一个新类来删除空格并将其应用于每一行，但您应该考虑用行类替换您的col类，因为它们没有自然填充。

.nopad {
    padding: 0 !important;
    margin: 0 !important;
}

Answer 2

因为它的两个独立块拥有高度，所以你必须为最高块应用边框颜色。

<div class="row"> 
    <div class="col-lg-2">
       some content
    </div>
    <div class="col-lg-10" style="border-left:1px solid #CCC">
       more content<br />more content<br />more content
    </div>
</div>

或者你可以使用javascript为所有块做同样的高度。 或者你可以尝试使用flexbox制作网格。

Answer 3

使用边框的挑战在于它是由盒子模型控制的。假设您想要使用左侧div的右边框，该边框的高度将由div本身的高度控制。当左侧div高于右侧时，垂直分隔符看起来是正确的。当左div比右边短时，垂直分隔符将不够长。这是因为右边的方框比左边的方框高。

处理它的方法（我认为，因为我没有在这个特殊情况下测试它）是将左div的高度样式设置为100％。这样它会扩展以填充父框，如果正确的div是两者中的较高者。这可能需要您设置垂直对齐样式以保持内容正确定位。

Answer 4

你可以添加左边和右边的右边框到所有列，因此最高的列将决定可见的边框高度。

由于这会有效地使边框宽度（部分）加倍，因此您还需要折叠它们。见https://stackoverflow.com/a/8417072/2795627：

.row > div {
    border-left: 1px;
    border-right: 1px;
    margin-left: -1px;
    margin-top: -1px; /* optional, for top and bottom borders */
    box-sizing: border-box; /* prevent columns from wrapping due to exceeded row width */
}