css – 在Bootstrap中创建响应分隔符(垂直/水平)

2023年4月12日 469次阅读

我在Bootstrap中创建响应分频器时遇到了一些麻烦.通过响应分频器,我指的是一个分隔线,它在大屏幕上是垂直的,在较小的屏幕上是水平的.

垂直分隔线：

《css – 在Bootstrap中创建响应分隔符(垂直/水平)》

水平分隔线：

《css – 在Bootstrap中创建响应分隔符(垂直/水平)》

我已经尝试了一下,并提出了不起作用：

<div class="row>
    <div class="col-md-5">
        <h2>Lorem ipsum</h2>
        <p>blah blach hery asd
  ad a dsasdadjaudn dadas asd ads a da d ad ad a d ad ad a d<br>asd ads asd da da da  dada
        </p>
    </div>
    <div class="col-md-2">
        &nbsp;
        <div class="sep">
            <div class="sepText">
                OR
            </div>
        </div>
    </div>
    <div class="col-md-5">
        <h2>Lorem lorem</h2>
        <p>ok ok ok</p>
    </div>
</div>

和css：

.sep {
    width: 1px;
    background: #cccccc;
    margin: 0 0 0 -1px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
}

.sepText {
    width: 75px;
    height: 18px;
    background: #ffffff;
    margin: -15px 0 0 -50px;
    padding: 5px 0;
    position: absolute;
    top: 50%;
    left: 50%;
    line-height: 18px;
    text-align: center;
}

最佳答案 这是一个简单的例子,说明如何使用Bootstrap 4.1创建一个带有单词的响应水平线

<div class="d-flex">
    <hr class="my-auto flex-grow-1">
    <div class="px-4">SOME TEXT HERE</div>
    <hr class="my-auto flex-grow-1">
</div>
点赞