-1

我设计了一个网站来测试 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>

此外，我的背景在小显示器上看起来也不好看。

请建议。

谢谢！！！

4

1 回答 1

1

Just remove col-2 and do like below 

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

Also in your 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;
}

So that for Medium layout it will looks great and it would be better not to put image text into those pallets...

于 2013-08-10T10:14:13.797 回答