内容溢出容器在bootstrap 3.0中

Question

我有这个网站： click here to see my website

我的问题是，当我在iphone中打开网站时，该网站填满了iphone的屏幕，但是有一些东西使得网站的屏幕宽度超过了屏幕，就像填充屏幕一样。是的，我无法找到它在哪里，也在网站的顶部有一个背景，我不能确定它来自哪里，也许它是相关的？

请告诉我， 谢谢

Answer 1

问题是您已经更改了网格类并使容器类左右填充了0个填充。网格分为3个部分，每个部分都是必不可少的。你在那里得到了正确的组件：容器，行和列，只是你似乎已经对填充进行了调整，这破坏了网格的自然行为。

网格如何工作

默认情况下，容器有15px的填充。该行以-15px的边距否定容器填充。色谱柱有15px的填充物，可将内容物从容器边缘拉出，形成一致的30px排水沟。

添加15px填充的目的只是否定了负行边距似乎很愚蠢，但是允许在其他列中嵌套列是必不可少的！请注意下图中红色轮廓指示的嵌套列如何整齐地嵌入封闭列中，而不会应用额外的填充。

在您的情况下，您已修改网格，在列类上左/右填充10px，在行类上有10px的负边距，在容器类上左/右填0。通过在容器上将左右填充设置为0，当您的列在xs断点处向下折叠到单个列时，没有任何内容可以将内容从窗口/视口的两侧拉出。您的单列左/右填充为10px，但该行的边距为10px，因此所有内容都会扩展到视口的整个宽度。

修复

要解决此问题并且不影响现有设计，您可以添加一个媒体查询，该查询仅为xs断点的容器添加一些填充：

@media (max-width: 768px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

这将确保您的整体设计不受768px以上所有其他视口尺寸的影响。

如果您希望导航栏和页脚扩展到窗口/视口的整个宽度，因为它位于容器内，您可以添加到媒体查询以进行调整：

@media (max-width: 768px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  nav, footer.row {
    margin-left: -15px;
    margin-right: -15px;
  }
}

Answer 2

使移动页面比预期更宽的内容是bootstrap的.row样式：margin-right: -10px，对于此元素：

<header class="row">
    ...
</header>

您是否在某处添加了自己的负边距？

Answer 3

这是你的标签之间的内容：

<header class="row">
        <div class="col-lg-3 col-sm-1">...</div>
        <div class="col-lg-7 col-sm-7">...</div>
        <div class="col-lg-2 col-sm-7 col-md-8 visible-lg visible-md">...</div>
        <div class="col-lg-2 col-sm-7 visible-xs">...</div>
  </header>

我相信你已经溢出了Bootstrap的12列网格，在大屏幕上你使用14而在小屏幕26（？）那个问题＃1