Question

我正在尝试找到一种调整网格列大小的方法。这是解释所以我已经找到了我想要实现的目标的图片基本上，当我调整浏览器窗口大小时，网格会发生变化，因此列中的最后一个元素会移动到新行。这可以通过bootstrap或任何其他技术完成吗？

一张图片胜过千言万语

Answer 1

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>

Answer 2

除非我在你的问题中遗漏了什么，否则这正是Bootstrap的用途。您可以提出自己的解决方案，但从Bootstrap开始就很容易。

http://getbootstrap.com/

存在其他响应式框架，但我建议使用Bootstrap

调整大小时的Bootstrap网格更改列

2 个答案: