html – 在容器外部扩展bootstrap行

概述我们在我们的网站上使用Bootstrap 3并且我在一个新模板上有一个请求,其设计有一些元素并不真正遵循引导网格.我试图让它工作,但没有成功. 我试图在下面的图片中解释这个问题.任何人都知道如何解决这个问题？ 一种选择是使用CSS伪:: before元素,它将与col-lg-6一起调整高度. #main { background: lightgreen; height: 100vh 我们在我们的网站上使用bootstrap 3并且我在一个新模板上有一个请求,其设计有一些元素并不真正遵循引导网格.我试图让它工作,但没有成功.

我试图在下面的图片中解释这个问题.任何人都知道如何解决这个问题？

解决方法 一种选择是使用CSS伪:: before元素,它将与col-lg-6一起调整高度.

@H_502_21@#main { background: lightgreen; height: 100vh;}#main > .row { height: 100vh;}.left { background: red; position: relative; top: 50%; transform: translateY(-50%);}.left:before { left: -999em; background: red; content: ''; display: block; position: absolute; wIDth: 999em; top: 0; bottom: 0;}<div ID="main"> <div > <div > .. </div> </div></div>

http://www.codeply.com/go/C80RYwhWrc

另一种选择是在内容.container后面使用绝对位置.container-fluID(全宽)作为“鬼”……

@H_502_21@.abs { position: absolute; right:0; top:0; bottom:0; z-index: 1;}<div > <div > <div > <h4>Content</h4> </div> <div > <!-- space over image --> </div> </div></div><div > <div > <div > <!-- empty spacer --> </div> <div > <img src="//placehold.it/1000x400"> </div> </div></div>

https://www.codeply.com/go/txUHH72f16(bootstrap 4)

类似的问题：
Get Two Columns with different background colours that extend to screen edge
Example with image right
Example with image left
Extend an element beyond the bootstrap container

总结

以上是内存溢出为你收集整理的html – 在容器外部扩展bootstrap行全部内容，希望文章能够帮你解决html – 在容器外部扩展bootstrap行所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。