Question

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

例如下面是我的代码，我使用了class =“col-2 col-sm-1 col-lg-3”，所以我需要的是大显示，网格将显示为'3- Col'和小显示器应该是2 Col（换行符），但它没有发生......

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

因此，对于Medium布局，它看起来很棒，最好不要将图像文本放入托盘中......

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

1 个答案: