我是CSS和Bootstrap的新手，我正在尝试创建一个3列的网页，其中左右两边是具有图案图像背景且内容介于两者之间的空列。当尝试使用Bootstrap的网格布局时，我只会在页面顶部获得一条直线。
<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的一切可能：)
关于html - 将背景图像应用于引导栏网格布局，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45241769/