我正在使用 boostrap 进行砌体布局。但我遇到了问题。正如您在我的代码中所见，我有 5 个 div。我想让 Div 4 和 5 向上移动(查看附图)但我不知道该怎么做。我可以用 margin-top 做到这一点，但它会破坏响应式布局。那么，对此可能的解决方案是什么？我是新手，这将是一个很大的帮助。提前致谢。
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<style>
.div1{
border: 2px solid;
}
.div2{
border: 2px solid;
}
.div3{
border: 2px solid;
height: 100px;
}
.div4{
border: 2px solid;
}
.div5{
border: 2px solid;
height: 40px;
}
</style>
</head>
<body>
<div class="col-md-12">
<div class="col-md-4 div1">Div1</div>
<div class="col-md-4 div2">Div2</div>
<div class="col-md-4 div3">Div3</div>
<div class="col-md-8 div4">Div4</div>
<div class="col-md-8 div5">Div5</div>
</div>
<!-- Loading minified js. jQuery and Bootstrap -->
<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
当前布局是:
但我想要这样:
最佳答案
在这种特定情况下，您可以使用嵌套..
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6 div1">Div1</div>
<div class="col-md-6 div2">Div2</div>
<div class="col-md-12 div4">Div4</div>
<div class="col-md-12 div5">Div5</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12 div3">Div3</div>
</div>
</div>
</div>
</div>
或者，在 div3 上使用 pull-right...
<div class="col-md-12">
<div class="row">
<div class="col-md-4 div1">Div1</div>
<div class="col-md-4 div2">Div2</div>
<div class="col-md-4 div3 pull-right">Div3</div>
<div class="col-md-8 div4">Div4</div>
<div class="col-md-8 div5">Div5</div>
</div>
</div>
如果您想使用 Masonry，请参阅 my answer用于 Bootstrap Masonry 解决方案。
关于html - 如何在 bootstrap 3 中制作砌体布局网格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43144434/