Twitter Bootstrap 3水平滚动问题

debugcn 发表于 Dev

凯塞尔尼奥

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

巴斯·乔布森

我不知道更改填充是否有助于首先将图像设置为100％。下面的代码将是100％视口（绿色）。还要提及您的内容有填充。这种填充你的COL-XS-12设置（将其删除：设置.COL-XS-12到零的填充）在你的情况下删除您的同事的填充-用影像。

<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 : //stackoverflow.com/a/19044326/1596547关于网格装订线的构造

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。