Question

我确实需要在基于引导程序的页面中分发可变数量的固定大小的div。意味着不确定一行的列数，但不同屏幕尺寸的每个网格单元的大小应相等。

For example see attached image. I have 15 fixed size divs. See how I need them distributed in different screen sizes. I did try with different bootstrap grid classes, but none helped so far. It will be a great help if any of you can guide me how I can achieve this using bootsrap.

Answer 1

工作演示：在代码段中运行代码并使用整页模式进行查看，并调整浏览器大小以验证是否可以看到正确的div。

希望它会有所帮助＆gt;

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
<div class="row">
    <div class="col-lg-1 col-xs-12 col-md-2 hidden-sm">1</div>
    <div class="col-lg-1 col-xs-12 col-md-2 col-sm-6">2</div>
    <div class="col-lg-1 col-xs-12 col-md-2 col-sm-6">3</div>
    <div class="col-lg-1 col-xs-12 col-md-2 hidden-sm">4</div>
    <div class="col-lg-1 col-xs-12 col-md-2 col-sm-6">5</div>
    <div class="col-lg-1 col-xs-12 col-md-2 col-sm-6">6</div>
    <div class="col-lg-1 col-xs-12 col-md-2 hidden-sm">7</div>
    <div class="col-lg-1 col-xs-12 col-md-2 col-sm-6">8</div>
    <div class="col-lg-1 col-xs-12 col-md-2 col-sm-6">9</div>
    <div class="col-lg-1 col-xs-12 col-md-2 hidden-sm">10</div>
    <div class="col-lg-1 col-xs-12 col-md-2 col-sm-6">11</div>
    <div class="col-lg-1 col-xs-12 col-md-2 col-sm-6">12</div>
    <div class="col-lg-1 col-xs-12 col-md-2 hidden-sm">13</div>
    <div class="col-lg-1 col-xs-12 col-md-2 col-sm-6">14</div>
    <div class="col-lg-1 col-xs-12 col-md-2 col-sm-6">15</div>
</div>
 </div>

Bootstrap：如何分配不同屏幕尺寸的固定大小的网格单元格，以及调整大小时的大小

1 个答案: