css - 客户端 Bootstrap - 部分 'exceeds' 其限制

Question

各位，

我的网站出现问题: http://clubedebeneficiosunilife.com.br/

“Destaques”部分有 16 张图片，每张图片都有一个“Saiba mais”按钮。

当我在15、17、19英寸的显示器上打开网站时都是正常的。好的!

当我用手机打开时，它也很好。 Bootstrap 工作正常，之前的 16 个拇指是 4x4 ...传递到 2x8 以适应较小的单元格屏幕:

喜欢这个链接: http://mobiletest.me/iphone_5_emulator/?u=http://clubedebeneficiosunilife.com.br

太完美了。

我的问题是当我打开平板电脑时: http://mobiletest.me/ipad_mini_emulator/?u=http://clubedebeneficiosunilife.com.br

“Destaques”部分以 2x8 显示拇指(正确)，但请注意，这是在推断他应该留在里面的白色背景容器。

如何修复 CSS 以使平板电脑的分辨率不会出现此问题？

我没有太多经验，解决这个问题有很多困难。

提前致谢。

Answer 1

您应该真正使用 container-fluid 类而不是 container，因为后者具有固定宽度，当您将固定宽度容器放置在固定宽度容器内时，它会由于所有填充而溢出，其中 container-fluid 设置为 100%

<div class="container-fluid">
    <h2 class="left">Destaques</h2>
    ...
</div>

问题展示:

.container, .container-fluid {
  border: 1px solid red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <h1>.container</h1>
  <div class="container">
    <h2>.container</h2>
    <div class="container">
      <h3>.container</h3>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <h1>.container</h1>
  <div class="container-fluid">
    <h2>.container-fluid</h2>
    <div class="container-fluid">
      <h3>.container-fluid</h3>
    </div>
  </div>
</div>

jsFiddle:https://jsfiddle.net/azizn/8tkLtjya/