Question

民间，

我的网站遇到了问题： http://clubedebeneficiosunilife.com.br/

有16个图像的'Destaques'部分，16个图像中都有一个'Saiba mais'按钮。

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

当我用手机打开时，它也很好。引导工作正常，之前的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>

问题演示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

1 个答案: