如何在Bootstrap中的2列之间添加Horizantal Line

Question

在屏幕截图中，它不会在中间组合。我正在使用Bootstrap 3。

Answer 1

您可以为列本身添加样式：

.col-md-3 {
    border-bottom: 1px solid black;
}

但是这会产生一条到达列边缘的线条，如果您的列的高度不同，则规则在展示位置中不会处于“偶数”状态。

你也可以简单地将一个<hr />（你可以设置为一个薄的1px边框）作为列中的第一个最后一个元素，在列的顶部创建一条水平线：

<div class="col-md-3">
    <hr />
    <p>Content starts here</p>
</div>

Answer 2

您可以使用<hr>元素插入水平分隔符。

如果您想使用普通的html和css代码，那么您可以看到以下代码：

<强> HTML

<div class="row"> <div class="column-1">Content1</div> </div>

<div class="row"> <div class="column-1">Content2</div> </div>

<强> CSS

.row:not(:last-child) {
border-bottom: 5px solid #000000;

}

.column-1:not(:last-child) {
border-right: 5px solid #000000;

}