客户端 boostrap - 部分“超过”其限制

【问题标题】：Client boostrap - section 'exceeds' its limit客户端 boostrap - 部分“超过”其限制
【发布时间】：2016-09-30 04:14:10
【问题描述】：

伙计们，

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

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

当我在 15、17、19 英寸的显示器上打开网站时，一切正常。好的！

用手机打开也不错。引导程序工作正常，之前 4x4 的 16 个拇指...传递到 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，让平板的分辨率不会出现这个问题？

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

提前致谢。

【问题讨论】：

标签： css wordpress twitter-bootstrap responsive-design row

【解决方案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/

【讨论】：