使用 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% 视口(viewport)(绿色)。还要提到您的内容有填充。此填充在您的 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>
add 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关于网格天沟的 build
关于css - Twitter Bootstrap 3 水平滚动问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19337482/