如何在移动设备上堆叠排序的列而在桌面上没有间隙？答案

【问题标题】：How can I stack sorted columns on mobile without gaps on desktop?如何在移动设备上堆叠排序的列而在桌面上没有间隙？
【发布时间】：2020-10-21 22:44:19
【问题描述】：

我对以下布局有疑问

    .box1 {
        background: green;
        height: 80px;
    }

    .box2 {
        background: red;
        height: 270px;
    }

    .box3 {
        background: blue;
        height: 200px;
    }

    .box4 {
        background: yellow;
        height: 100px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>

<body>

    <h1>Layout 1</h1>

    <div class="container">
        <div class="row">
            <div class="col-md-8 box1">box1</div>
            <div class="col-md-4 box2">box2</div>
        </div>
        <div class="row">
            <div class="col-md-8 box3">box3</div>
            <div class="col-md-4 box4">box4</div>
        </div>
    </div>

    <hr />

    <h1>Layout 2</h1>

    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="box1">box1</div>
                <div class="box3">box3</div>
            </div>
            <div class="col-md-4">
                <div class="box2">box2</div>
                <div class="box4">box4</div>
            </div>
        </div>
    </div>


    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</body>

</html>

两者在某些方面都是正确的，在其他方面是错误的

布局 1 在移动屏幕上以正确的顺序（box1,2,3,4）堆叠列，但在桌面屏幕上，由于内容大小不同，内容之间会出现不希望的间隙。这是我正在使用的当前布局。

布局 2 不显示布局 1 的间隙，但列未正确堆叠（框 1、3、2、4）。

我明白为什么这两种布局的行为方式都是如此。

如何使用 bootstrap 或纯 css 创建一个结合两种布局所需结果的布局？（请注意，我正在处理的项目使用的是旧版本的 bootstrap）。

谢谢

编辑

框的高度可能因页面而异。我刚刚以说明问题的方式设置它们。

【问题讨论】：

你实现过flex features吗？看来他们会解决你的问题。
@isherwood 这真的能解决布局 1 的问题吗？由于堆叠多行，我仍然会有间隙，对吗？随意修改我的代码:)
我现在没有时间调查。我的建议是你试一试。你会比现在更接近，然后你会问一个更具体的问题。
您设置的链接来自BS 3.4，并且在您设置BS 4的标签中，您使用的是哪个？因为例如row 类的行为方式不同
@MaxiGui 感谢您编辑问题。是的，正如我提到的，该项目仍然使用 3。将标签更改为 bootstrap-3，只能找到 twitter-bootsrap-3，这就是我最初使用 bs4 标签的原因

标签： html css layout twitter-bootstrap-3

【解决方案1】：

它很脏，但我是这样处理的：

@media (min-width: 992px){
  .layout-1 .box3{
    margin-top: -190px;
  }
  .layout-1 .box4{
    float:right;
  }
}

我还在寻找更好的东西。

演示

.box1 {
    background: green;
    height: 80px;
}

.box2 {
    background: red;
    height: 270px;
}

.box3 {
    background: blue;
    height: 200px;
}

.box4 {
    background: yellow;
    height: 100px;
}

/*** ADDED ***/
@media (max-width: 991px){
  .layout-3 .row:first-child{
    display:flex;
    flex-direction: column;
  }

  .layout-3 .box1{order:1;}
  .layout-3 .box2{order:2;}
  .layout-3 .box3{order:3;}

  .layout-3 .box2{
    position: relative;
  }
}
@media (min-width: 992px){
  .layout-1 .box3{
    margin-top: -190px;
  }
  .layout-1 .box4{
    float:right;
  }
  
  
  .layout-3 .row{
    position: relative;
  }
  .layout-3 .box2{
    position: absolute;
    top: 0;
    right: 0;
  }
  .layout-3 .box4{
    float:right;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>

<body>

    <h1>Layout 1</h1>

    <div class="container layout-1">
        <div class="row">
            <div class="col-md-8 box1">box1</div>
            <div class="col-md-4 box2">box2</div>
        </div>
        <div class="row">
            <div class="col-md-8 box3">box3</div>
            <div class="col-md-4 box4">box4</div>
        </div>
    </div>

    <hr />

    <h1>Layout 2</h1>

    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="box1">box1</div>
                <div class="box3">box3</div>
            </div>
            <div class="col-md-4">
                <div class="box2">box2</div>
                <div class="box4">box4</div>
            </div>
        </div>
    </div>
    
    <h1>Layout 3</h1>

    <div class="container layout-3">
        <div class="row">
            <div class="col-md-8 box1">box1</div>
            <div class="col-md-8 box3">box3</div>
            <div class="col-md-4 box2">box2</div>
        </div>
        <div class="row">
            <div class="col-md-4 box4">box4</div>
        </div>
    </div>


    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</body>

</html>

【讨论】：

谢谢 :) 使用媒体查询是一种有趣的方法。不幸的是，盒子的高度可能因页面而异，这是您的解决方案崩溃的地方。我什至不确定如果不使用 js，我正在寻找的东西是否可行：-/
我可能有一种显示方式，但这意味着您需要像“移动版本”和“更大版本”这样的 html 会是一个问题吗？
你的意思是让每个侧列在 dom 上两次，然后在视口更改时将它们切换到不同位置的视图？
@Andy 是的，这就是我的意思。否则，我尝试了布局 3，这是另一种方法，但不是 100% 成功。