将背景图像应用于引导列网格布局



我是 css 和引导程序的新手,我正在尝试拥有一个 3 列网页,其中左和右将是带有图案图像背景的空列,内容介于两者之间。当尝试使用引导的网格布局时,我只在页面顶部得到一条直线。

<body>
<div class="container-fluid text-center">
<div class="row-content">
<div class="col-sm-2" style="background-image:url('108.png');
background-repeat:repeat;"></div>
<div class="col-sm-8">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-sm-2" style="background-image:url('108.png');
background-repeat:repeat;"></div>
</div>
</div>
</body>

所以我希望这些左右列与中间的内容一样长,而不是顶部的直线。 感谢帮助。

表格很棒,它们可以处理大多数事情 - 无论如何你仍然应该测试。但它们是可靠的。

.row-content {
display: table;
}
.row-content > div {
display: table-cell;
}

玩一会儿,对 css 做更多的研究。你必须考虑你正在编写的代码的生命 - 阅读书籍,在线研究,尽你所能了解关于css的一切可能:)

最新更新