Bootstrap 4 如何重叠响应堆叠的两个 Div
Bootstrap 4 How to Overlap Two Divs that Stack Responsively
我是一名后端人员,正在尝试找出我们使用 Bootstrap 4 的项目的一些细节。
简单地说,我们要创建在此处执行的布局:
https://codepen.io/mediumandmessage/pen/xVeXop
(这个例子和下面的代码来自我找到的原始Bootstrap3例子,不是Bootstrap4)
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...
中实施
如果有人可以在这里分享任何专业知识,我将不胜感激!
只需将 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>
您可以将转换添加到覆盖列(对于较小的屏幕,您可能需要使用媒体查询来取消此操作)。
请注意在下面的 html 中,我已经修复了你的代码以使用 boostrap 4 - 列必须在一行内(它们不能在一行中)而且我认为没有一个 -xs
class 更多
.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&auto=compress&dpr=1&crop=entropy&fit=crop&w=1087&h=725&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>
我是一名后端人员,正在尝试找出我们使用 Bootstrap 4 的项目的一些细节。
简单地说,我们要创建在此处执行的布局: https://codepen.io/mediumandmessage/pen/xVeXop
(这个例子和下面的代码来自我找到的原始Bootstrap3例子,不是Bootstrap4)
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...
如果有人可以在这里分享任何专业知识,我将不胜感激!
只需将 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>
您可以将转换添加到覆盖列(对于较小的屏幕,您可能需要使用媒体查询来取消此操作)。
请注意在下面的 html 中,我已经修复了你的代码以使用 boostrap 4 - 列必须在一行内(它们不能在一行中)而且我认为没有一个 -xs
class 更多
.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&auto=compress&dpr=1&crop=entropy&fit=crop&w=1087&h=725&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>