如何使用bootstrap4在小屏幕上将div从div内部移动到它的正下方

Question

enter image description here 我有一个 div(div1) 包含另一个 div(div2) 我想知道如何在小屏幕上将 div1 移动到 div2 下 我正在使用 bootstrap4

我尝试使用 row 和 col 类，但没有用

( (div2) )

编辑：

<div id="div1" style="background:url("sdic/sdv.jpg") center no-repeat cover;">
 <div id="div2">
  Some content
 </div>
</div>

我希望 div2 位于 div1 之下，并且 div 将保留在里面的背景图片

Answer 1

您需要在 div1 中引入另一个 div。在大于 425 像素的屏幕尺寸上，它将具有正常排序。小于425px，顺序会翻转。

编辑：更新了答案，使其不需要自定义 CSS。您可以使用 bootstrap 4 d-flex 和 order 类来实现相同的结果。这也将使用引导断点。

（如果没有引导程序，请使用提供的 CSS）

.div1 { display: flex; flex-flow: column; }
.div3 { order: 1; }
.div2 { order: 0; }

@media (min-width: 425px) {
  .div3 { order: 0; }
  .div2 { order: 1; }
}

<div class="div1 d-flex">
  <div class="div3 order-2 order-sm-1"><h3>Div3</h3></div>
  <div class="div2 order-1 order-sm-2"><h2>Div2</h2></div>
</div>

.div1 { display: flex; }
.div2 { order: 2; }
.div3 { order: 1; }

Answer 2

实现这一点的最佳方法是拥有一个包含两个直接子级的父容器，一个是带有适当大小图像的图片元素，另一个是块级元素（一个 div 很好）。

基本标记可能如下所示（调整浏览器大小以查看效果）：

* {
  box-sizing: border-box;
  max-width: 100%;
}

.splash {
  height: 20em;
  position: relative;
}

.splash img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

@media (min-width: 40.1em) {
  .splash {
    height: 100vh;
    overflow: hidden;
  }
  
  .splash > img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left; 0;
    width: 100%;
  }

  .splash > .modal {
    background-color: hsla(0,0%,0%,.2);
    height: 100vh;
    position: absolute;
    top: 0;
    left: 20%;
    width: 30%;
  }
}

<div class="splash">
  <picture>
    <img src="//unsplash.it/1600x900" />
  </picture>
  <div class="modal">
    <p>Form goes here/</p>
  </div>
</div>

考虑到模型的简单性，乍一看可能有点棘手，但在较大的视口上，模态位于 img 元素的顶部，而在较小的视口上则不然。您需要充实它并根据您的要求调整大小。

您可能希望在图片元素中放置更多图像源以加载适合屏幕的图像。抱歉，我不能提供更多细节，但我必须去开会，这是一种与框架无关的非常简单的方法。我认为 Bootstrap 中没有内置的解决方案，因为它不是一个超级常见的功能，但我可能是错的。

Answer 3

我试过了，碰巧在工作

CSS：

  /****HEADER START****/
  #header .header-background{
   background: url("../images/header.jpg");
   background-repeat:no-repeat;
   background-size: cover;
   background-position: center;
 }
 @media only screen and (max-width:1024px) {
  .header-background{
    background: none !important;
  }
 .header-img{
    display:block !important;

 }
  .form-container{
    display:none;
  }
  .form-container2{
    display: block !important;
  }
}
/****HEADER END****/

html:

   <div class="container-fluid header-background">
    <div class="row">
      <div>
        <img class="d-none img-fluid header-img" src="images/header.jpg"/>
         <div class="form-container">
          <img class="img-fluid"src="images/unkownbrand.png" />
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, iure.</p> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, eveniet?</p>
           <form>
           <input type="text" class="form-control" />
           <input type="text" class="form-control" />
           </form>
    </div>
  </div>
</div>
<div class="form-container2 d-none">
  <img class="img-fluid"src="images/unkownbrand.png" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, iure.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, eveniet?</p>
  <form>
  <input type="text" class="form-control" />
  <input type="text" class="form-control" />
  </form>
</div>

Answer 4

你为什么不尝试对小屏幕使用媒体查询，例如

    @media (max-width: 801px) {

   div1 {position: relative;}
   div2 {position: absolute; top: -80px (adjust it as you want) };

}

这应该可行。

Answer 5

最简单的方法是在移动视图的子 div 上添加上边距

https://plnkr.co/edit/edrz9fQeRHqL1jPqV2Ri

<style>
.div1{
  border: 1px red solid;
  height: 100px;
  width: 100px;
}

.div2{
  border: 1px black solid;
  height: 50px;
  width: 50px;

}

@media only screen and (max-width: 400px) {
  .div2{
      margin-top: 100%;
  }
}
</style>
<div class="div1">
   <div class="div2">    
   </div>
</div>