html - Bootstrap Grid 3x3 Firefox与Chrome错误

我有以下标记：

.myclass {
  display: flex;
  flex-wrap: wrap;
}
.myclass img {
  width: 100%;
  display: block;
  height: auto;
}

<link href="//cdn.jsdelivr.net/bootswatch/3.3.5/paper/bootstrap.css" rel="stylesheet" />
<div class="main col-md-12 col-sm-12">
  <div class="container-fluid">
    <div class="row myclass">
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="text-center well">
          <a href="#">
            <img src="#" />
            <h4 class="for_bubles">My label -3</h4>
          </a>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="text-center well">
          <a href="#">
            <img src="#" />
            <h4 class="for_bubles">My label -2</h4>
          </a>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="text-center well">
          <a href="#">
            <img src="#" />
            <h4 class="for_bubles">My label -1</h4>
          </a>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="text-center well">
          <a href="#">
            <img src="#" />
            <h4 class="for_bubles">My label 0</h4>
          </a>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="text-center well">
          <a href="#">
            <img src="#" />
            <h4 class="for_bubles">My label 1</h4>
          </a>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="text-center well">
          <a href="#">
            <img src="#" />
            <h4 class="for_bubles">My label 2</h4>
          </a>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="text-center well">
          <a href="#">
            <img src="#" />
            <h4 class="for_bubles">My label 3</h4>
          </a>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="text-center well">
          <a href="#">
            <img src="#" />
            <h4 class="for_bubles">My label 4</h4>
          </a>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="text-center well">
          <a href="#">
            <img src="#" />
            <h4 class="for_bubles">My label 5</h4>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

据您所见，它是3x3 Bootstrap网格。但是它的表现非常糟糕：在我的Firefox上，仅.myclass可以使所有内容正确无误。
但是如果没有这一行，我有3个正确的列，而不是2个透明列，然后每行有1列。有了这一行，我在Chrome中遇到了错误：这里有2个正确的列，并且有空白处而不是第三列。我该如何解决这个问题？

最佳答案

在引导程序中，您不应溢出宽度总和大于12的列的一行。这意味着要在布局中构建的每一行都应位于单独的<div class="row"></div>中。检查以下代码段是否可以解决您的问题。

.myclass img {
  width: 100%;
  display: block;
  height: auto;
}

<link href="//cdn.jsdelivr.net/bootswatch/3.3.5/paper/bootstrap.css" rel="stylesheet" />
<div class="main col-md-12 col-sm-12">
  <div class="container-fluid">
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="text-center well">
          <a href="#">
            <img src="#" />
            <h4 class="for_bubles">My label -3</h4>
          </a>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="text-center well">
          <a href="#">
            <img src="#" />
            <h4 class="for_bubles">My label -2</h4>
          </a>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="text-center well">
          <a href="#">
            <img src="#" />
            <h4 class="for_bubles">My label -1</h4>
          </a>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="text-center well">
          <a href="#">
            <img src="#" />
            <h4 class="for_bubles">My label 0</h4>
          </a>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="text-center well">
          <a href="#">
            <img src="#" />
            <h4 class="for_bubles">My label 1</h4>
          </a>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="text-center well">
          <a href="#">
            <img src="#" />
            <h4 class="for_bubles">My label 2</h4>
          </a>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="text-center well">
          <a href="#">
            <img src="#" />
            <h4 class="for_bubles">My label 3</h4>
          </a>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="text-center well">
          <a href="#">
            <img src="#" />
            <h4 class="for_bubles">My label 4</h4>
          </a>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="text-center well">
          <a href="#">
            <img src="#" />
            <h4 class="for_bubles">My label 5</h4>
          </a>
        </div>
    </div>
  </div>
</div>

关于html - Bootstrap Grid 3x3 Firefox与Chrome错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39007255/