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

Question

我想在 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>

有关此的任何帮助都会对我有所帮助。

Answer 1

勾选这个link

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

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

我也把列的高度设置为 100px 以显示结果。

Answer 2

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

我希望这会引导你得到你的输出

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

How can I put the horizontal line between the two columns in a Bootstrap row?

css

grid

grid-system

twitter-bootstrap

reactjs