Question

我已经使用bootstrap和css绘制图形，使用3x3网格设置了网站的这一部分：

<div class="row">
  <div class="container">
    <div class="col-sm-4">
      <div class="expbox">
        <div class="icircle cl-effect-12 hvr-bounce-out">
          <div class="icon">
            <span class="rt-snowmobile rt-icon"></span>
          </div>
        </div>
        <div class="headings">
          <h3>Snowmobile Safaris</h3>
        </div>
        <div class="iconboxborder"> </div>
        <div class="infoboxtext">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores provident temporibus porro adipisci, voluptates est, accusamus omnis unde velit aspernatur</p>
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="expbox">
        <div class="icircle cl-effect-12 hvr-bounce-out">
          <div class="icon">
            <span class="rt-crosscountry-skiing rt-icon"></span>
          </div>
        </div>
        <div class="headings">
          <h3>Cross-country Skiing</h3>
        </div>
        <div class="iconboxborder"></div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="expbox">
        <div class="icircle cl-effect-12 hvr-bounce-out">
          <div class="icon">
            <span class="rt-downhill-skiing rt-icon"></span>
          </div>
        </div>
        <div class="headings">
          <h3>Downhill Skiing</h3>
        </div>
        <div class="iconboxborder"></div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="container">
    <div class="col-sm-4">
      <div class="expbox">
        <div class="icircle cl-effect-12 hvr-bounce-out">
          <div class="icon">
            <span class="rt-river-rafting rt-icon"></span>
          </div>
        </div>
        <div class="headings">
          <h3>River Rafting</h3>
        </div>
        <div class="iconboxborder"></div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="expbox">
        <div class="icircle cl-effect-12 hvr-bounce-out">
          <div class="icon">
            <span class="rt-hiking rt-icon"></span>
          </div>
        </div>
        <div class="headings">
          <h3>Hiking</h3>
        </div>
        <div class="iconboxborder"></div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="expbox">
        <div class="icircle cl-effect-12 hvr-bounce-out">
          <div class="icon">
            <span class="rt-safaris rt-icon"></span>
          </div>
        </div>
        <div class="headings">
          <h3>Animal Safaris</h3>
        </div>
        <div class="iconboxborder"></div>
      </div>
    </div>
  </div>
</div>

和CSS

.expbox {
  position: relative;
  display: block;
  background: #fff;
  width: 330px;
  height: 200px;
  float: left;
  margin: 35px;
  z-index: 0;
  border-radius: 25px;
}

.icircle {
  position: absolute;
  width: 105px;
  height: 105px;
  background: #fff;
  border: 10px solid #DB2B39;
  border-radius: 100%;
  left: -30px;
  top: -30px;
}

.icon {
  position: absolute;
  font-size: 54px;
  left: 15px;
  top: 10px;
  z-index: 999;
}

.icon:hover .rt-icon:before {
  content: '\25BA';
  position: absolute;
  opacity: 1;
  left: 5px;
}

.iconboxborder {
  position: absolute;
  background: #DB2B39;
  width: 70%;
  height: 3px;
  left: 0px;
  top: 20px;
  z-index: -1;
}
.infoboxtext {
    position: absolute;
    left: 82px;
    top: 35px;
    width: 50%;
}
.headings {
    position: absolute;
    top: -30px;
    left: 80px;
}

请查看此代码集http://codepen.io/ex1tium/pen/QEYazp

正如您在调整窗口大小时所看到的那样，3列以900px宽度堆叠在彼此之上，而不是向下推动第3行。理想情况下，我想在大屏幕上并排放置3个活动盒，平板电脑分辨率上有2个盒子，每行只有1个盒子。

图形也堆叠在一起，我尝试设置边距/填充没有运气。 look here

圆圈必须具有静态宽度和高度，因为它会在调整大小时变形。

请帮助我重新构建此代码，或者至少指出我正确的方向。

我知道它必须与图形元素上的绝对/相对定位有关，但我似乎无法正确地将它包装在容器中。

Answer 1

要在不同的屏幕上使用不同的布局，您可能需要使用Bootstraps col-*类。以下是一个示例：http://codepen.io/anon/pen/YWBZGX

变化是：

用col-sm-4替换所有col-md-4 col-sm-6 col-xs-12以使用Bootstrap的12列布局。所以在Medium屏幕上，每个块占用4列（因此一行显示12/4 = 3个块），而在Small上它需要6个（所以一行显示12/6 = 2），而在Extra小的那个上它显示1每行。
删除row和container，以便前三个中的最后一个和后三个中的第一个可以包含在同一行中。类row和container会强制它们被分组到不同的容器中吗？

我希望这会有所帮助：）

Answer 2

将所有col-sm-4更改为col-sm-6 col-md-5 col-lg-4

如何使用正确的边距正确制作这个3 x 3网格的图标和文本堆栈？

2 个答案: