时间戳

首页 > 解决方案 > 如何在较小的屏幕上将 2 行和 2 列移动到 1 行但按顺序正确列

html - 如何在较小的屏幕上将 2 行和 2 列移动到 1 行但按顺序正确列

问题描述

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<style>
/* SECTION WITH LINES */
.section > div {
    border: 2px solid rgba(0,0,0,0.1);
    padding: .3em .8em;
    margin-top: 2em;
    position: relative;
    text-transform: uppercase;
    font-size: 1.2em;
    color: #555;
    font-weight: 600;
    text-align: center;
 }

.section > div:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    border-bottom: 2px solid;
    width: 90%;
    margin: 0 20px;
    color: rgba(0,0,0,0.1);
}

.section > div:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    border-bottom: 2px solid;
    width: 90%;
    margin: 0 20px;
    color: rgba(0,0,0,0.1);
}
/* HALF SECTION WITH LINES */
.h-section > span {
    border: 2px solid rgba(0,0,0,0.1);
    padding: .3em .8em;
    margin-top: 2em;
    margin-bottom: 2em;
    position: relative;
    text-transform: uppercase;
    font-size: 1.3em;
    color: #555;
    font-weight: 600;
    z-index: 1;
    text-align: center;
    float: left;
    height: 50px;
}

.h-section > span:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    border-bottom: 2px solid;
    width: 40%;
    margin: 0 20px;
    color: rgba(0,0,0,0.1);
}

.h-section > span:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    border-bottom: 2px solid;
    width: 40%;
    margin: 0 20px;
    color: rgba(0,0,0,0.1);
}
</style>

<div class="container">

    <div class="d-flex justify-content-center section col-lg-4 offset-lg-4 col-md-6 offset-md-3 col-sm-6 offset-sm-3 col-xs-6">
        <div>What service do you require?</div>
    </div>


    <div class="container">
    <div class="row">
    
        <div class="d-flex-lg justify-content-between">
        <div class="d-flex justify-content-center col-lg-6 h-section"><span>What we offer</span></div>
        <div class="justify-content-center col-lg-6">
            Blah
        </div>



        <div class="d-flex justify-content-center col-lg-6 h-section"><span>Our benefits</span></div>
            <div class="d-flex justify-content-center col-lg-6">
                Blah 2
            </div>
        </div>
        </div>


    </div>
    </div>


</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<style>
/* HALF SECTION WITH LINES */
.h-section > span {
    border: 2px solid rgba(0,0,0,0.1);
    padding: .3em .8em;
    margin-top: 2em;
    margin-bottom: 2em;
    position: relative;
    text-transform: uppercase;
    font-size: 1.3em;
    color: #555;
    font-weight: 600;
    z-index: 1;
    text-align: center;
    float: left;
    height: 50px;
}

.h-section > span:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    border-bottom: 2px solid;
    width: 40%;
    margin: 0 20px;
    color: rgba(0,0,0,0.1);
}

.h-section > span:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    border-bottom: 2px solid;
    width: 40%;
    margin: 0 20px;
    color: rgba(0,0,0,0.1);
}
</style>

 <div class="container">
    <div class="row">

        <div class="d-flex-lg justify-content-between">
        <div class="d-flex justify-content-center col-lg-6 h-section"><span>What we offer</span></div>
        <div class="justify-content-center col-lg-6">
            Blah
        </div>



        <div class="d-flex justify-content-center col-lg-6 h-section"><span>Our benefits</span></div>
            <div class="d-flex justify-content-center col-lg-6">
                Blah 2
            </div>
        </div>
        </div>


    </div>
</div>

目前它在较小的显示器上按预期工作，但在较大的显示器上，两行都在不同的行上。当我尝试将它们放在同一行时，它会破坏它在较小的显示器上正常工作

我添加了样式，我的问题包含更多代码，所以这是添加更多文本以便发布。谢谢

标签： htmlcssbootstrap-4bootstrap-grid

解决方案

柱子在大屏幕中并排显示，在小屏幕中显示在彼此之上。

您的 HTML/Bootstrap 中存在一些错误，最明显的是您试图在一行中包含超过12 个 col 单位。

这是解决方案：

CSS：

.column_title {
    border: 2px solid rgba(0,0,0,0.1);
    padding: .3em .8em;
    margin-top: 2em;
    margin-bottom: 2em;
    position: relative;
    text-transform: uppercase;
    font-size: 1.3em;
    color: #555;
    font-weight: 600;
    z-index: 1;
    text-align: center;
    float: left;
    height: 50px;
}

.column_title:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    border-bottom: 2px solid;
    width: 40%;
    margin: 0 20px;
    color: rgba(0,0,0,0.1);
}

.column_title:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    border-bottom: 2px solid;
    width: 40%;
    margin: 0 20px;
    color: rgba(0,0,0,0.1);
}

.column_text {
    float:left;
    clear:left;
}

HTML：

<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <div class="column_title">What we offer</div>
            <div class="column_text">Blah 1</div>
        </div>
        <div class="col-lg-6">
            <div class="column_title">Our benefits</div>
            <div class="column_text">Blah 2</div>
        </div>
    </div>
</div>

祝你好运，让我知道结果如何！

推荐阅读