Twitter Bootstrap 3 水平滚动问题

Posted 2023-03-06

【中文标题】Twitter Bootstrap 3 水平滚动问题

【英文标题】：Twitter Bootstrap 3 Horizontal Scrolling Issue

【发布时间】：2013-10-20 16:12:46

【问题描述】：

使用 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/

【问题讨论】：

你对每张图片都使用了img-responsive类吗？

没关系，我可以看到你有！

【参考方案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://***.com/a/19044326/1596547 关于网格排水沟的构造

【讨论】：

做到了。非常感谢您的帮助。