如何在窗口调整大小时调整 div 的大小？答案

【问题标题】：How to resize a div on window resize?如何在窗口调整大小时调整 div 的大小？
【发布时间】：2016-07-08 14:19:28
【问题描述】：

我想在 4 列中显示项目列表及其描述，但是当我调整窗口大小时，我希望只显示 2 列，这意味着项目及其描述，但实际发生的是当我调整了窗口的大小，项目列和它们的描述列是一个在另一个上，它变得不可读。

<div class="row">
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-6">                
                <div class="row">
                    <div class="col-md-6"> 
                       Item nr.1
                    </div>
                    <div class="col-md-6"> 
                       Description
                    </div>
                </div>                  
                <div class="row">
                    <div class="col-md-6"> 
                        Item nr.2
                    </div>
                    <div class="col-md-6"> 
                        Description
                    </div>
                </div>
        </div>                      
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-6">
            <div class="row">
                    <div class="col-md-6"> 
                       Item nr.3
                    </div>
                    <div class="col-md-6"> 
                       Description
                    </div>
                </div>                      
                <div class="row">
                    <div class="col-md-6"> 
                        Item nr.4
                    </div>
                    <div class="col-md-6"> 
                        Description
                    </div>
                </div>
        </div>          
</div>

有没有人知道如何更改上面的 html，以便在调整窗口大小时 4 列变为 2？

【问题讨论】：

标签： html css twitter-bootstrap responsive-design multiple-columns

【解决方案1】：

不要在行内反复使用“行”，如果需要，请使用。也遵循引导程序不要添加你自己的东西，你会破坏 strct

<div class="row">
  <div class="col-md-4"> 
    Item nr.1
  </div>
  <div class="col-md-4"> 
    Description
  </div>
  <div class="col-md-4"> 
    Item nr.2
  </div>
  <div class="col-md-4"> 
    Description
  </div>
</div>
<div class="clearfix"></div>
<div class="row">
  <div class="col-md-4"> 
    Item nr.1
  </div>
  <div class="col-md-4"> 
    Description
  </div>
  <div class="col-md-4"> 
    Item nr.2
  </div>
  <div class="col-md-4"> 
    Description
  </div>
</div>

【讨论】：

【解决方案2】：

试试这个：

<div class="row">
  <div class="col-md-3 col-sm-6 col-xs-12">
    Item nr.1
  </div>
  <div class="col-md-3 col-sm-6 col-xs-12">
    Description
  </div>
  <div class="col-md-3 col-sm-6 col-xs-12">
    Item nr.2
  </div>
  <div class="col-md-3 col-sm-6 col-xs-12">
    Description
  </div>
  <div class="col-md-3 col-sm-6 col-xs-12">
    Item nr.3
  </div>
  <div class="col-md-3 col-sm-6 col-xs-12">
    Description
  </div>
  <div class="col-md-3 col-sm-6 col-xs-12">
    Item nr.4
  </div>
  <div class="col-md-3 col-sm-6 col-xs-12">
    Description
  </div>
</div>

演示：http://codepen.io/hmache/pen/yJzyox 看看引导程序的网格文档：http://getbootstrap.com/css/#grid-options

【讨论】：