调整大小时引导网格更改列
Ene*_*zem 0 css twitter-bootstrap
我正在尝试找到一种调整网格列大小的方法。解释起来很困难，所以我附上了一张我想要实现的目标的图片
基本上，当我调整浏览器窗口大小时，网格会发生变化，因此列中的最后一个元素会移动到新行。这可以通过引导程序或任何其他技术来完成吗？
一张图片胜过千言万语
Bootstrap 有内置的类，你可以用它们来做。对于您显示的上图，请尝试以下代码，不要忘记包含 bootstrap css。您可以从 getBootstrap 网站获得。我假设一排有 6 个盒子。您甚至可以借助 css 中的 @media 查询来处理。尝试在不同的屏幕宽度和不同类型的设备（如 ipad 平板电脑和手机等）上探索 @media 查询行为。
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row"><!-- row is a built in class of bootstrap and each row has 12 column -->
<!-- give each column a width of 2 columns -->
<!-- col-lg-* is for large screens but include all type of classes for all type of screens-->
<div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;>
Box 1
</div>
<!-- col-md-* is for medium size screens but include all type of classes for all type of screens-->
<div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;">
Box 2
</div>
<!-- col-sm-* is for small screens but include all type of classes for all type of screens-->
<div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;">
Box 3
</div>
<!-- col-xs-* is for extra small screens but include all type of classes for all type of screens-->
<div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;">
Box 4
</div>
<!-- col-xl-* is for extra large screens but include all type of classes for all type of screens-->
<div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;">
Box 5
</div>
<div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;">
Box 6
</div>
</div>
</body>
</html>
