使用 Bootstrap 4 在移动设备上的两个块之间插入块答案

【问题标题】：Insert block in between two blocks on mobile with Bootstrap 4使用 Bootstrap 4 在移动设备上的两个块之间插入块
【发布时间】：2020-04-24 18:54:38
【问题描述】：

我想在桌面上实现如下布局：

[1][2]
[3][2]

我需要第 2 列是桌面上 1 和 3 的高度。

然后在移动设备上我希望它看起来像：

[1]
[2]
[3]

我尝试了 2 个选项：

选项 1：

        <div class="row">
            <div class="col-md-7">
                <span>1</span>
            </div>

            <div class="col-md-5">
                <span>2</span>
            </div>

            <div class="col-md-7">
                <span>3</span>
            </div>
        </div>

问题是块 2 只是块 1 的高度。

选项 2：

我想过使用列排序在块 1 和块 3 之间插入块 2：

        <div class="row">
            <div class="col-md-7">
                <div>
                    <span>1</span>
                </div>

                <div>
                    <span>3</span>
                </div>
            </div>

            <div class="col-md-5">
                <span>2</span>
            </div>
        </div>

但我认为这是不可能的。

还有其他我没有想到的方法吗？还是可以使用上述方法之一？

谢谢。

【问题讨论】：

试试flex-layout属性

标签： html css bootstrap-4 flexbox

【解决方案1】：

试试这样的

#flex_box1 div
{
  width:100%;
  height:150px;
  border: 2px solid #555;
  margin-bottom:15px;  
}
#flex_box1 div:last-child{ margin:0; }
#flex_box2 div
{
  width:100%;
  height:100%;
  background-color: #555; 
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-4 d-flex flex-column" id="flex_box1">
          <div></div>
          <div></div>
        </div>
        <div class="col-8 " id="flex_box2">
          <div></div>
        </div>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

【讨论】：

谢谢。我缺少移动部分，如何在移动上的白框之间插入灰色框？

【解决方案2】：

我可以建议您使用名为 Masonry 的库。它快速且易于实施。链接：https://masonry.desandro.com/

有了这个，你可以得到你提到的桌面版和移动版所需的结果。

演示： https://codepen.io/Bibeva/pen/qBExWjj

HTML：

<!-- bootstrap 4 css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row grid">
  <div class="col-md-6 grid-item">
    <span>1</span>
  </div>

  <div class="col-md-6 grid-item grid-item-box">
    <span>2</span>
  </div>

  <div class="col-md-6 grid-item">
    <span>3</span>
  </div>
</div>

<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- masonry js cdn-->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<!-- custom js -->
<script>
$('.grid').masonry({
  // options
  itemSelector: '.grid-item'
});
</script>

CSS：

.grid-item { 
  background: #000;
  color: #fff;
  height: 100px;
}

.grid-item-box { 
  height: 200px;
  background: #333;
}

【讨论】：

谢谢。但我不能使用任何库。

【解决方案3】：

.container1{
    display:inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
 }
.container1 div {
    height: 50vh;
    width: 200px;
    margin: 0;
    border: 1px solid black;
    color: #fff;
    text-align: center;
    align-items: center;
    display: inline-flex;
    justify-content: center;
    font-size: 50px;
    font-weight: bold;
}
.div1 {
    background: #f60;
}
.div2 {
    background: #f55;
    height: 100vh!important;
}
.div3 {
    position: absolute;
    bottom: 0;
    left:0;
    background: #0ae4dd;
}

<div class="container1">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
</div>

<pre>
**For Mobile View** 
@media(max-width: 992px){
  .container1{
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
  }
  .container1 div {
    width:100%;
    height: auto;
  }
  .div2 {
    height: auto!important;
  } 
  .div3{
    position:inherit;
  }
}
</pre>

【讨论】：

【解决方案4】：

如果将来有人需要解决方案，我最终使用了 flex-direction: column 并将高度放在容器上：

HTML：

        <div id="flex-container" class="row flex-lg-column">
            <div class="col-12 col-lg-6 order-1">
                <span>1</span>
            </div>

            <div class="col-12 col-lg-6 order-3">
                <span>2</span>
            </div>

            <div class="col-12 col-lg-6 order-2">
                <span>3</span>
            </div>
        </div>

CSS：

@media (min-width: 992px) {

    #flex-container { 
        max-height: 40rem; 
    }
    #flex-container .order-1, 
    #flex-container .order-2, 
    #flex-container .order-3 { order: initial; }
}

而且因为 Bootstrap 4 .row 有 flex-wrap: wrap，块 3 将在 lg 屏幕上环绕到两个块的右侧。

【讨论】：