我使用的是固定宽度的 Bootstrap 3。
我的页脚有两列(左和右),每列都有不同的背景颜色。 我希望我的页脚内容包含在“.container”中,以便与我网站上的其他内容保持一致。
现在这是我无法开始工作的地方:
我想让页脚看起来像全宽。所以“.container”的左边应该是一种颜色,右边是另一种颜色。
此外,当分辨率低于某个点时,两列应该在彼此下方移动,但背景颜色仍然是全 Angular 。
看图更清楚。 picture
我的第一个想法是在“.container-wrapper”上使用背景图片,然后在移动版本上使用从中间对齐的不同背景。像这样:
CSS
.kleur {
background:url(img/test-bg.jpg);
background-repeat:repeat-y;
background-position:center; }
@media (max-width: 992px) {
.kleur {
background:url(img/test-bg2.jpg);
background-repeat:repeat-x;
background-position:center; }
}
HTML
<div class="fullwidthcontainer kleur">
<div class="kleur-links" style="background:#cfcfcf; height:100%; width:100%"></div>
<div class="container">
<div class="row">
<div class="col-md-8" style="background:#feff8b;"> <br/><br/><br/> <br/><br/><br/> </div>
<div class="col-md-4" style="background:#8bd7ff;"> <br/><br/><br/> <br/><br/><br/> </div>
</div>
</div>
Link to working example, scroll down
这适用于桌面,但对于移动设备,它仅在两列具有完全相同的高度时才有效。我真的很喜欢高度可变,但不知道如何...
有人有什么想法吗?
最佳答案
关于html - Bootstrap 3 固定宽度布局,全宽页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21690640/