Twitter Bootstrap 3 水平滚动问题

Question

使用TB v3.0.0构建组合网站时，遇到了一个水平滚动问题，但我似乎无法解决它。

尝试在移动设备上实现图像的全屏显示，因此去除了左/右边距，但会出现水平滚动。以下是导致问题的CSS代码：

@media (max-width: 767px) {
    .container {
         padding-right: 0;
         padding-left: 0;
         margin-right: auto;
         margin-left: auto;
    }
}

这是我正在使用的暂存网站: http://www.kesernio.com/playground/

- kesernio

---

你在每个图片上使用了 img-responsive 类吗？ - Adam 'Sacki' Sackfield

无所谓，我能看到你有！ - Adam 'Sacki' Sackfield

Answer 1

我想知道更改填充是否有助于首先将图像设置为100％。 下面的代码将是100％视口（绿色）。还要提到您的内容具有填充。此填充设置在col-xs-12上（要删除它：将.col-xs-12的填充设置为零） 在您的情况下，删除带有图像的col--的填充。

<div class="container" style="background-color:green;">
        <div class="row">
            <div class="col-xs-12 contact">
        content
            </div>
        </div>
    </div>
</div>

关于你的滚动条，实际上你需要这样做：

<div class="container" style="background-color:green;padding:0">
    <div class="row">
        <div class="col-xs-12 contact">
    content
        </div>
    </div>
</div>

添加 padding:0 这将给你一个水平滚动条，因为你的 .row 类在两侧都有负边距 15px。 要删除滚动条，请将 .row 的边距设置为零：

<div class="container" style="background-color:green;padding:0">
    <div class="row" style="margin:0">
        <div class="col-xs-12 contact">
    content
        </div>
    </div>
</div>

另请参阅：https://dev59.com/4mMk5IYBdhLWcg3wtQBd#19044326，了解网格的排水沟结构

- Bass Jobsen