如何在保留响应式设计的同时超越容器

Question

我想建立这个页面，但我有一个问题，就是我不知道如何在保留响应式布局的同时将图像强制从 bootstrap 容器中取出，无论如何我可以做到吗没有每个设备的大量绝对定位？

网页屏幕设计

iPad 和更小的屏幕设计

Answer 1

这是一个大致模仿您的布局的两列响应式设计。

它使用 Bootstrap 的列排序功能来交换较小屏幕上文本和图像块的顺序。

div {
  outline: 1px solid red;
}

.img-absolute {
  position: absolute;
  top: 80px;
  right: 80px;
}

.div-black {
  position: absolute;
  top: 40px;
  right: 40px;
  background-color: black;
  width: 280px;
  height: 280px;
}

@media (max-width: 990px) {
  .img-absolute {
    right: 380px;
  }
  .div-black {
    right: 340px;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div clas="container">
  <div class="row">
    <div class="col-lg-6 order-1 order-lg-2">
      <h4>Lorem Ipsum</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer feugiat scelerisque varius morbi enim. Duis ut diam quam nulla porttitor massa id neque aliquam. Non pulvinar neque laoreet suspendisse interdum consectetur. Tempus urna et pharetra pharetra massa massa ultricies mi quis. Urna duis convallis convallis tellus id interdum velit laoreet id. Lacus vel facilisis volutpat est velit egestas. Eros donec ac odio tempor. Sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum. Morbi tempus iaculis urna id volutpat lacus laoreet. Ultricies mi eget mauris pharetra et ultrices. Habitasse platea dictumst vestibulum rhoncus est pellentesque. Mi quis hendrerit dolor magna eget est lorem. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Nulla posuere sollicitudin aliquam ultrices sagittis orci. Neque aliquam vestibulum morbi blandit cursus risus at.</p>
    </div>
    <div class="col-lg-6 col order-2 order-lg-1">
      <div class="div-black"></div>
      <img class="img-absolute"
           src="https://picsum.photos/600/300" />
    </div>
  </div>
</div>

如何在保留响应式设计的同时超越容器

How to go beyond the container while retaining responsive design

html

css

responsiveness

responsive-images

bootstrap-4