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/

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://stackoverflow.com/a/19044326/1596547关于网格排水沟的构造

Twitter Bootstrap 3水平滚动问题

1 个答案: