如何将两列之间的水平线放在 Bootstrap 行中？答案

【问题标题】：How can I put the horizontal line between the two columns in a Bootstrap row?如何将两列之间的水平线放在 Bootstrap 行中？
【发布时间】：2020-11-17 12:31:50
【问题描述】：

我想在 bootstrap 的两列之间有一条水平线。我已经尝试了很多，但我没有得到任何解决方案。我想要它如下：

[  Col 1    ]     [  Col 2        ]     [  Col 3        ]
[           ]     [               ]     [               ]
[           ]     [               ]     [               ]
[ Content   ]-----[   Content     ]-----[    Content    ]    ---->This is the horizontal line .
[           ]     [               ]     [               ]
[           ]     [               ]     [               ]

我想要 bootstrap 列之间的水平线。我正在研究 React，我的代码如下：

<Wrapper2>
        <div >
            <div className="row">
                <div className="col-md-4 col-sm-12">
                   Col 1
                </div>
                <div className="col-md-4 col-sm-12">
                    Col 2
                </div>
                <div className="col-md-4 col-sm-12">
                    Col 3
                </div>
            </div>
        </div>
    </Wrapper2>

任何有关这方面的帮助都会对我有所帮助。

【问题讨论】：

所以你只想在列之间的空间？
是的，应该在两列之间画线。

标签： css reactjs twitter-bootstrap grid grid-system

【解决方案1】：

.container
{
padding:10px;
position:relative;
}

.col-12{
border:1px solid;
}

.col-4::after {
    border-bottom: 2px solid red;
    width:15px;
    position: absolute;
    content: "";
    right:-8px;
    top:50%;

}

.col-4:last-child::after {
display:none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row vertical-line">
    <div class="col-4">
     <div class="col-12">
       01
     </div>
    </div>
 <div class="col-4">
     <div class="col-12">
       02
     </div>
    </div>
   <div class="col-4">
     <div class="col-12">
       03
     </div>
    </div>
  </div>
</div>

我希望这将引导您完成输出

【讨论】：

【解决方案2】：

查看此链接

https://codesandbox.io/s/gifted-sid-rp6bs

我做了一个例子来向你展示它是如何完成的。您可以使用position: absolute 在div 中添加一个hr，并将父div 声明为position: relative，然后您可以将其放置在div 中的任何位置。

我还将列的高度设置为 100px，以便向您显示结果。

【讨论】：