Bootstrap 3 RC1 响应式流体网格系统断点问题

Question

我设计了一个网站来测试 Bootstrap 3 RC1。 我连续有 4 个网格（12 网格 / 4 = col-3），当我尝试将其最小化为小显示时，网格行的区域不会进入第二行，但它已放大到同一行.

我的网站：http://goo.gl/zcn8ri

例如下面是我的代码，我使用了 class="col-2 col-sm-1 col-lg-3"，所以我需要的是在大显示中，网格应该显示为 '3- Col' 并且对于小显示它应该是 2 Col(line-break) 但它没有发生......

  <div class="row">
    <div class="col-2 col-sm-1 col-lg-3">
      <div class="pc-area">
        <center>
          <a href="#"><span class="area-positions"><img src="images/pc-laptop.png" alt="PC Laptop"></span></a>
        </center>
      </div>
    </div>
    <div class="col-2 col-sm-1 col-lg-3">
      <div class="mac-area">
        <center>
          <a href="#"><span class="area-positions"><img src="images/mac-macbook.png" alt="Mac"></span></a>
        </center>
      </div>
    </div>
    <div class="col-2 col-sm-1 col-lg-3">
      <div class="iphone-area">
        <center>
          <a href="#"><span class="area-positions"><img src="images/iphone.png" alt="iPhone"></span></a>
        </center>
      </div>
    </div>
    <div class="col-2 col-sm-1 col-lg-3">
      <div class="ipad-area">
        <center>
          <a href="#"><span class="area-positions"><img src="images/ipad.png" alt="iPads"></span></a>
        </center>
      </div>
    </div>
  </div>

而且我的背景在小显示器上看起来不太好。

请提出建议。

谢谢！！！

Answer 1

只需删除 col-2 并执行以下操作

  <div class="row">
    <div class="col-sm-3 col-lg-3">
      <div class="pc-area item">
        <center>
          <a href="#"><span class="area-positions"><img src="images/pc-laptop.png" class="img-responsive" alt="PC Laptop"></span></a>
        </center>
      </div>
    </div>
    <div class="col-sm-3 col-lg-3">
      <div class="mac-area item">
        <center>
          <a href="#"><span class="area-positions"><img src="images/mac-macbook.png"  class="img-responsive"  alt="Mac"></span></a>
        </center>
      </div>
    </div>
    <div class="col-sm-3 col-lg-3">
      <div class="iphone-area item">
        <center>
          <a href="#"><span class="area-positions"><img src="images/iphone.png"  class="img-responsive"  alt="iPhone"></span></a>
        </center>
      </div>
    </div>
    <div class="col-sm-3 col-lg-3">
      <div class="ipad-area item">
        <center>
          <a href="#"><span class="area-positions"><img src="images/ipad.png"  class="img-responsive"  alt="iPads"></span></a>
        </center>
      </div>
    </div>
  </div>

也在你的 CSS 中

.pc-area {
    background: url(images/pc-laptop-area.png) no-repeat scroll 0 0 transparent;
    min-height: 225px;
    max-width: 100%;
    height: auto;
}
.mac-area {
    background: url(images/mac-area.png) no-repeat scroll 0 0 transparent;
    min-height: 225px;
    max-width: 100%;
    height: auto;
}
.iphone-area {
    background: url(images/iphone-area.png) no-repeat scroll 0 0 transparent;
    min-height: 225px;
    max-width: 100%;
    height: auto;
}
.ipad-area {
    background: url(images/ipad-area.png) no-repeat scroll 0 0 transparent;
    min-height: 225px;
    max-width: 100%;
    height: auto;
}
.ipod-area {
    background: url(images/ipod-area.png) no-repeat scroll 0 0 transparent;
    min-height: 225px;
    max-width: 100%;
    height: auto;
    }
.galaxy-area {
    background: url(images/galaxy-area.png) no-repeat scroll 0 0 transparent;
    min-height: 225px;
    max-width: 100%;
    height: auto;
}
.macpro-area {
    background: url(images/macpro-area.png) no-repeat scroll 0 0 transparent;
    min-height: 225px;
    max-width: 100%;
    height: auto;
    }
.business-area {
    background: url(images/web-business-area.png) no-repeat scroll 0 0 transparent;
    min-height: 225px;
    max-width: 100%;
    height: auto;
}

所以对于中等布局，它看起来很棒，最好不要将图像文本放入那些托盘中......