Bootstrap - 特定点后4列网格中断

Question

我有一个问题，弄清楚为什么引导网格在我的演示中的某个点之后似乎破了，看起来像这样， 不介意顶部（col-sm- 9和col-sm-3），它​​在它自己的行中。 到目前为止它有13个项目，如下所示：

这样的14个项目，因为你可以看到图像没有从左边开始，因为它应该：

在23个项目中显示如下：

这是一种异常，因为根据我添加的图像，我认为它看起来不同，但所有图像都被归类为＆＃34; img-responsive＆＃34;。

HTML：http://pastebin.com/f4wqhuL8 CSS：http://pastebin.com/8sCvUzbL

Answer 1

问题是由具有不同尺寸的列的内部元素引起的，可能是由于图像尺寸不同。要解决此问题，请将图像全部更改为正确的大小，它们都与它们所在的列和行相关，或者使用CSS来强制内部元素的大小。

Answer 2

仅关注您的图像预览：这可能是因为与摇滚人物相比，该图像的比例比其他图像更宽。

快速检查：划分图像的高度/宽度，如果你在岩石上的人物图像比例较小，则可以证明我的假设。

从图像更改为背景图像

html

这

<div class="article-tile">
    <img src="img/fig.jpg" class="img-responsive" />
    <span class="text-overlay-articles">Hello World</span>
</div>

到

<div class="article-tile" style="background-image: url(img/fig.jpg);">
    <span class="text-overlay-articles">Hello World</span>
</div>

<强> CSS

这

.article-tile{
  margin-bottom: 10px;
  /*width: 107%;*/
  position: relative;
}

到

.article-tile{
   margin-bottom: 10px;
   position: relative;
   height: 300px; //or what you prefer, you should change this value on other resolution with @media query
   width: 100%;
   background-repeat: no-repeat;
   background-size: cover;
}

或background-size: contain;如果您愿意，则始终显示整个图像，并且不要在图像之间不等于空格。

Answer 3

如果你想要每行4列，你需要用row包裹你的列然后将这四列包装在他们自己的行中

<强> DO

<section class="row">
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
</section>

<section class="row">
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
</section>

而不是

<section class="row">
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
  .....
</section>