适用于巨型机头的Bootstrap 3网格列
布拉德
我的网站顶部有一个巨型加油站，其背景图像可以在调整浏览器窗口大小时重新调整大小。
我还有另一个背景图像，位于超大背景图像上。我一直在使用position：relative;为该叠加图像设置不同的断点。并将适当的像素数量传递给top，left，width和height样式。
之所以这样做，是因为随着Web浏览器尺寸的减小，叠加的图像需要减小，而我使用顶部和左侧的原因是，我希望使叠加的图像的底部与超大背景的底部对齐该断点处的图像。
我知道是否将覆盖图像设置为使用.make-sm-column（5）和适当的偏移量，它可能会起作用，但是我无法将覆盖图像的底部衬在超大背景图像的底部。
范例html：
<div id="jumbotron">
<div id="jumbotron-man"></div>
</div>
CSS只是将背景图像和位置设置为相对，并且为每个断点设置图像的顶部，左侧，高度，宽度，我目前不使用.make-sm-column或offset作为叠加层。巨无霸上还有其他叠加层和文本div，但是我认为，只要问一下这个问题，我就可以朝这个方向发展，并可以将其应用于巨无霸上的其他元素。
如图所示，您可以看到我想要如何排列 
我感觉在这种情况下我没有利用引导程序，感谢任何指导，谢谢。
阿尔贝尔
有几种不同的方法，一种常见的方法是position:relative;在父级和position:absolute;子级上设置子级，将子级放在子级的底部bottom:0;。
所以：
CSS：
#jumbotron {
position: relative;
}
#jumbotron-man {
position: absolute;
bottom: 0;
}
HTML：
<div id="jumbotron">
<div id="jumbotron-man"></div>
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Bootstrap 3网格列的高度相同
- 2
Bootstrap 3网格列的高度相同
- 3
Bootstrap 4网格列合并
- 4
Bootstrap 3网格大小
- 5
Bootstrap 3网格系统
- 6
Bootstrap 3网格对齐问题
- 7
Bootstrap 3网格轮播
- 8
Bootstrap 3网格：一排内的一列
- 9
Bootstrap 3网格布局动态生成的列未清除正确
- 10
Bootstrap 3网格：在行之间移动元素
- 11
Bootstrap 3网格可以扩展吗？
- 12
在bootstrap 3网格中排列图像
- 13
如何使用bootstrap3网格系统
- 14
Bootstrap 3网格无法在移动设备上扩展
- 15
如何使用bootstrap3网格系统
- 16
请说明Twitter Bootstrap 3网格系统
- 17
Bootstrap 3网格：在行之间移动元素
- 18
Bootstrap 3网格切换行
- 19
Bootstrap 3网格无法在移动设备上扩展
- 20
Bootstrap 3网格问题Firefox未对准
- 21
我是否应用了bootstrap 3网格系统？
- 22
bootstrap 3网格不是并排而是在下面
- 23
如何正确使用Bootstrap 3网格属性
- 24
bootstrap 3网格系统无法正常工作
- 25
Bootstrap 4.5网格
- 26
如何使用bootstrap 3网格系统设计自定义网格？
- 27
如何管理Bootstrap 4网格？
- 28
Bootstrap-第1网格和第12网格列是否有可能以20px的边距留白？
- 29
您使用哪种用于移动/桌面的Boostrap3网格模式？
我来说两句