Bootstrap 4 如何重叠响应堆叠的两个 Div答案

【问题标题】：Bootstrap 4 How to Overlap Two Divs that Stack ResponsivelyBootstrap 4 如何重叠响应堆叠的两个 Div
【发布时间】：2020-01-02 20:24:13
【问题描述】：

我是一名后端人员，正在尝试为我们使用 Bootstrap 4 的项目找出一些细节。

简单地说，我们要创建在这里执行的布局： https://codepen.io/mediumandmessage/pen/xVeXop

（此示例和下面的代码来自我找到的原始 Bootstrap 3 示例，而不是 Bootstrap 4）

HTML：

.somesection {margin-top:50px!important;}
body {
  font-size:17px;
  font-family:Helvetica Neue;
}
img {max-width:100%;}

.overlay-text {
  font-size:3.5vw;
  float:right;
  width:65%; /*important*/
  bottom:21vw; /*important*/
  padding: 25px;
  background:#f7f7f7;
}

<div class="container somesection">
  <div class="row col-xs-6">  
     <img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1087&h=725&q=80">
  </div>
  <div class="col-xs-3 col-sm-offset-4 overlay-text">
      This is some text that should partially overlay.
  </div>
</div>

但是，该示例使用 Bootstrap 3 并在 Bootstrap 4 中中断（文本水平显示在图像下方）并且也没有响应地堆叠 div。

我尝试过使用absolute 和relative 定位等。它变成了很多代码，可以干净地执行并做出响应，我希望那里的人可能对在纯Bootstrap4 中实现有所了解。 ..

如果有人可以在这里分享任何专业知识，我将不胜感激！

【问题讨论】：

标签： css bootstrap-4 responsive-design

【解决方案1】：

您可以向叠加列添加转换（您可能需要通过媒体查询来取消此操作以用于较小的屏幕）。

请在下面的 html 中注意，我已修复您的代码以使用 boostrap 4 - 列必须在一行内（它们不能在一行上）并且我认为没有 -xs 类更多

.overlay-text {
  /* these two are needed - the align self makes the column not stretch the whole height of the image column and the translate moves the column over the image */
  align-self: flex-start;
  transform: translateX(-20%);

  /* the following are for example only */
  background-color: #ffffff;
  padding:20px;
}

<div class="container somesection">
  <div class="row">
    <div class="col col-sm-6">
      <img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?format=auto&amp;auto=compress&amp;dpr=1&amp;crop=entropy&amp;fit=crop&amp;w=1087&amp;h=725&amp;q=80" class="w-100">
    </div>
    <div class="col col-sm-3 col-sm-offset-4 overlay-text">
      This is some text that should partially overlay.
    </div>
  </div>
</div>

Example bootply

【讨论】：

谢谢！工作正是我需要的。非常感谢您的帮助。
没问题，乐于助人:)

【解决方案2】：

只需将position:relative; 添加到.overlay-text 也可以调整bottom的值

.somesection {margin-top:50px!important;}
body {
  font-size:17px;
  font-family:Helvetica Neue;
}
img {max-width:100%;}

.overlay-text {
  font-size:3.5vw;
  float:right;
  width:65%; /*important*/
  bottom:21vw; /*important*/
  padding: 25px;
  background:#f7f7f7;
  position:relative;
}

<div class="container somesection">
  <div class="row col-xs-6">  
     <img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1087&h=725&q=80">
  </div>
  <div class="col-xs-3 col-sm-offset-4 overlay-text">
      This is some text that should partially overlay.
  </div>
</div>

【讨论】：