客户端自举 - 部分“超过”极限

Question

伙计们，

我在我的网站上的麻烦： http://clubedebeneficiosunilife.com.br/

有一节“Destaques”与16倍的图像大拇指和“Saiba MAIS”每个按钮为16.

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

当我打开手机时，它也很好。引导工作正常，16个拇指，以前是4×4 ...传递到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/