我无法弄清楚我的代码有什么问题。我是 Bootstrap 的新手，我的问题有点微不足道。我的一个区域位置不对。我尝试了一种不同的路线，只制作一行，而不是增加 div 大小，而是减少它们，但它有完全相同的问题。 (以全屏模式运行代码)。
请帮帮我!
.row {
background-color: yellow;
}
.col-sm-3, .col-sm-6 {
border:solid 2px black;
}
div {
height:200px;
}
.two-div {
height:400px;
}
.three-div {
height:600px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 three-div pull-left">Works</div>
<div class="col-sm-6">Works</div>
<div class="col-sm-3 two-div pull-right">Works</div>
</div>
<div class="row">
<div class="col-sm-3 two-div">Works</div>
<div class="col-sm-3 three-div">Works</div>
</div>
<div class="row">
<div class="col-sm-3 two-div pull-right">Works</div>
</div>
<div class="row">
<div class="col-sm-6">:(</div>
</div>
</div>
</body>
</html>最佳答案
通过在适当的列上进行一些嵌套和右拉，您可以反转float:left并使其工作(尽管是一个黑客!)...
http://www.codeply.com/go/rgHEL6DW12
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="row">
<div class="col-sm-4 three-div">works</div>
<div class="col-sm-8">works</div>
<div class="col-sm-4 three-div pull-right">works</div>
<div class="col-sm-4 two-div pull-right">works</div>
<div class="col-sm-8 pull-right">
;-)
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-sm-12 two-div">works</div>
<div class="col-sm-12 two-div">works</div>
</div>
</div>
</div>
</div>
这样想……
关于html - Bootstrap 3合并行和列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43129153/