Question

例如，如果我有

<style type="text/css">
#box{
    height: 130px;
    background-color: red;
    margin: 10px;
}
</style>
<div class="row">
    <div class="col-md-4">
        <div id="box"></div>
    </div>
    <div class="col-md-4">
        <div id="box"></div>
    </div>
    <div class="col-md-4">
        <div id="box"></div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div id="box"></div>
    </div>
    <div class="col-md-4">
        <div id="box"></div>
    </div>
    <div class="col-md-4">
        <div id="box"></div>
    </div>
  </div>

这看起来像

   box     box     box    
   box     box     box

然后在调整窗口大小后，它会变成这样的

   box  
   box
   box
   box
   box
   box

我想要的是如果我调整窗口大小，让我们说宽度为766像素就会变成这样的

   box     box
   box     box 
   box     box

然后在一个较小的窗口后，它会变得像

   box  
   box
   box
   box
   box
   box

我希望它像3次转型。

Answer 1

Bootstraps内置列系统会在单行的情况下自动解决此问题。我改变了你的代码以便相应地工作。

col-md-4：在中型屏幕上，使用4列基本12列（适合3）

col-sm-6：在小型媒体上，使用6列基本12（适合2）

col-xs-12：在微小的媒体上，使用12列基本12（适合1）

<div class="row">
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div id="box"></div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div id="box"></div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div id="box"></div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div id="box"></div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div id="box"></div>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
        <div id="box"></div>
    </div>
</div>

Answer 2

使用bootstrap提供的媒体查询，请点击以下链接

Media queries

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

如何制作带有响应图像的引导列

2 个答案: