使用twitter-bootstrap将一个div顶部的两个div组合在一起

Question

我想实现如下设置：

[ - div - ] [ - div - ]

[------- div --------]

无论屏幕大小是多少，我希望它们始终保持在一起。使用twitter-bootstrap框架实现这一目标的最佳方法是什么？

Answer 1

您也可以在不使用bootstrap的情况下实现如下：

[--width:50%--][--width:50%--]
[--width:100%--]

可能你必须使用其他CSS，如float：left和clear：两者都是底部div

Answer 2

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-6" style="background-color:red; height:50px"></div>
<div class="col-xs-6" style="background-color:yellow; height:50px"></div>
<div class="col-xs-12" style="background-color:green; height:50px"></div>
</div>

使用额外的小网格系统

[ - col-xs-6 - ] [ - col-xs-6 - ]

[------- col-xs-12 --------]

Answer 3

确保你有链接到页面的引导程序，否则你将无法使魔法发生。如果您真的想学习，我建议您查看w3以获取他们的教程。

https://www.w3schools.com/bootstrap/default.asp