html - 响应时两个 Bootstrap 行未正确对齐

Question

所以我正在开发这个网站，客户想要如图所示的蜂窝状图案: http://27.121.66.1/~scsc1126/test.html

它在常规模式下看起来是我想要的方式，但在响应模式下，第二组六边形不是整齐地叠在一起，而是向右偏移。我不知道为什么。我敢肯定这很简单，但我想不通。

代码如下:

.icon-row-1 {
	position: relative;
	clear: both;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0;
	width: 90%;
}
.icon-row-2 {
	float: none;
	position: relative;
	clear: both;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0;
	width: 60%;
}

<div class="container">
  <h1> COMPETITIONS </h1>
  <p>&nbsp; </p>
  <div class="row text-center">
    <div class="icon-row-1">
      <div class="col-md-4"><a href="http://schools.raci.org.au/wp/beta/competition/crystal-growing/">
        <h2> Titration </h2>
        <img alt="titration" src="http://schools.raci.org.au/wp/beta/wp-content/uploads/2014/03/titration.png"/></a></div>
      <div class="col-md-4"><a href="http://schools.raci.org.au/wp/beta/competition/crystal-growing/">
        <h2> Crystal Growing </h2>
        <img alt="crystal growing" src="http://schools.raci.org.au/wp/beta/wp-content/uploads/2014/03/crystal-growing.png"/></a></div>
      <div class="col-md-4"><a href="http://schools.raci.org.au/wp/beta/competition/ancq/">
        <h2> ANCQ </h2>
        <img alt="ancq" src="http://schools.raci.org.au/wp/beta/wp-content/uploads/2014/03/ancq.png"></a></div>
    </div>
  </div>
  <div class="row text-center">
    <div class="icon-row-2">
      <div class="col-md-6"> <a href="http://schools.raci.org.au/wp/beta/store/"><img alt="store" class="alignnone wp-image-42 size-full" height="347" src="http://schools.raci.org.au/wp/beta/wp-content/uploads/2014/03/store.png" width="301" />
        <h2> Visit the Store </h2>
        </a></div>
      <div class="col-md-6"> <a href="http://schools.raci.org.au/wp/beta/other-initiatives/"><img alt="other-initiatives" class="alignnone wp-image-1123 size-full" height="347" src="http://schools.raci.org.au/wp/beta/wp-content/uploads/2014/03/other-initiatives.png" width="301" />
        <h2> Other Initiatives </h2>
        </a></div>
    </div>
  </div>
</div>

我做错了什么？？？这让我发疯。

Answer 1

   

 img{max-width: 100%; height: auto;}
    .icon-row-1 {
    	position: relative;
    	clear: both;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-left: auto;
    	margin-bottom: 0;
    	width: 90%;
    }
    .icon-row-2 {
    	float: none;
    	position: relative;
    	clear: both;
    	margin-right: auto;
    	margin-left: auto;
    	margin-bottom: 0;
    	width: 60%;
    }

    <div class="container">
      <h1> COMPETITIONS </h1>
      <p>&nbsp; </p>
      <div class="row text-center">
        <div class="icon-row-1">
          <div class="col-md-4"><a href="http://schools.raci.org.au/wp/beta/competition/crystal-growing/">
            <h2> Titration </h2>
            <img alt="titration" src="http://schools.raci.org.au/wp/beta/wp-content/uploads/2014/03/titration.png"/></a></div>
          <div class="col-md-4"><a href="http://schools.raci.org.au/wp/beta/competition/crystal-growing/">
            <h2> Crystal Growing </h2>
            <img alt="crystal growing" src="http://schools.raci.org.au/wp/beta/wp-content/uploads/2014/03/crystal-growing.png"/></a></div>
          <div class="col-md-4"><a href="http://schools.raci.org.au/wp/beta/competition/ancq/">
            <h2> ANCQ </h2>
            <img alt="ancq" src="http://schools.raci.org.au/wp/beta/wp-content/uploads/2014/03/ancq.png"></a></div>
        </div>
      </div>
      <div class="row text-center">
        <div class="icon-row-2">
          <div class="col-md-6"> <a href="http://schools.raci.org.au/wp/beta/store/"><img alt="store" class="alignnone wp-image-42 size-full" height="347" src="http://schools.raci.org.au/wp/beta/wp-content/uploads/2014/03/store.png" width="301" />
            <h2> Visit the Store </h2>
            </a></div>
          <div class="col-md-6"> <a href="http://schools.raci.org.au/wp/beta/other-initiatives/"><img alt="other-initiatives" class="alignnone wp-image-1123 size-full" height="347" src="http://schools.raci.org.au/wp/beta/wp-content/uploads/2014/03/other-initiatives.png" width="301" />
            <h2> Other Initiatives </h2>
            </a></div>
        </div>
      </div>
    </div>