带有固定包装的Bootstrap网格 – 防止堆叠起来
正如标题所说，我正在试图使用Bootstrap 3网格系统与一个固定的包装。 但是，当我调整浏览器的列堆叠，即使包装保持相同的大小？
顺便说一句：我使用的版本3，以便我可以移动到一个响应式布局后，我已经移植的网站。 （这是巨大的，我是一个人，所以一步一步是唯一的select…）
<!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="../../assets/js/html5shiv.js"></script> <script src="../../assets/js/respond.min.js"></script> <![endif]--> <style> /* Custom container */ .container-fixed { margin: 0 auto; max-width: 800px; min-width: 800px; width: 800px; background-color:#C05659; } .container-fixed > hr { margin: 30px 0; } </style> </head> <body> <div class="container-fixed"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <hr> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> </body> </html> 您可以使用非堆栈col-xs-*类…
<div class="container"> <div class="row"> <div class="col-xs-4">.col-4</div> <div class="col-xs-4">.col-4</div> <div class="col-xs-4">.col-4</div> </div> </div>
演示： http ： //bootply.com/80085
编辑： Bootstrap 4 ， xs不再需要被指定。
<div class="container-fluid"> <div class="row"> <div class="col-4">.col-4</div> <div class="col-4">.col-4</div> <div class="col-4">.col-4</div> </div> </div>
