Question

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

<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？

Answer 1

不要一次又一次地使用＆＃34; row＆＃34;在行内，如果需要则使用。也按照引导标准，不要添加你自己的东西，你将打破条纹

<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>

Answer 2

试试这个：

＆＃13;

<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>

＆＃13;

＆＃13; 演示：http://codepen.io/hmache/pen/yJzyox 看一下bootstrap的网格文档：http://getbootstrap.com/css/#grid-options

如何调整窗口大小调整div的大小？

2 个答案: