我在 bootstrap 中有一个网格，如下所示。它适用于大屏幕。但是当涉及到中等屏幕时，它并没有很好地堆叠起来。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<style type="text/css">
p{
padding: 50px;
font-size: 32px;
font-weight: bold;
text-align: center;
background: #f2f2f2;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-xs-12 col-sm-12"><p>Box 1</p></div>
<div class="col-lg-4 col-md-6 col-xs-12 col-sm-12"><p>Box 2</p></div>
<div class="col-lg-4 col-md-6 col-xs-12 col-sm-12"><p>Box 3</p></div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-xs-12 col-sm-12"><p>Box 4</p></div>
<div class="col-lg-4 col-md-6 col-xs-12 col-sm-12"><p>Box 5</p></div>
<div class="col-lg-4 col-md-6 col-xs-12 col-sm-12"><p>Box 6</p></div>
</div>
</div>
</body>
</html>
我必须维护两个行类，我不能使用 col-md-4。有可能吗？当我选择 col-md-4 时遇到的问题是 div 重叠(不是上面的代码，但在实际情况下。)
最佳答案
当使用 Bootstrap 网格时，您总是希望 col- 在一行中加起来最多为 12。
p {
padding: 50px;
font-size: 32px;
font-weight: bold;
text-align: center;
background: #f2f2f2;
}<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6">
<p>Box 1</p>
</div>
<div class="col-lg-4 col-md-6">
<p>Box 2</p>
</div>
<div class="col-lg-4 col-xs-12 col-sm-12">
<p>Box 3</p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<p>Box 4</p>
</div>
<div class="col-lg-4 col-md-6">
<p>Box 5</p>
</div>
<div class="col-lg-4 col-xs-12 col-sm-12">
<p>Box 6</p>
</div>
</div>
</div>
</body>Check out this Fiddle查看此网格响应分辨率变化的方式。
希望这对您有所帮助。
编辑:这里是一个链接 Bootstrap Grid Templates .它是一个很好的资源，在您记住它之前，您可以随时回顾它。
关于css - div在网格布局中分布不均，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29076696/