Question

我是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>

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

Answer 1

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

.row-content {
display: table;
}

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

进行一些游戏，对CSS进行更多研究。你必须考虑你正在编写的代码的生命 - 阅读书籍，在线研究，尽你所能了解有关css的一切可能：）

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

1 个答案: