Question

我的投资组合网站使用行来显示全宽图像。这些在我的桌面和ipad上看起来很好，但是一旦在手机上看到左边和右边似乎有边距。

以下是代码：

<section class="no-padding" id="portfolio">
    <div class="container-fluid">
        <div class="row no-gutter">
            <div class="col-xs-12">
               <img src="img/focus.jpg" class="img-responsive" alt="Focus Ireland"></a>
            </div>
        </div>   
     </div> 
</section>

该网站正在http://www.burnser.com/index.html

上线

任何帮助都会非常感激。提前致谢。

Answer 1

Bootstrap的col-xs-12类有一个填充。

iOS

在大于768px的屏幕中，该填充设置为0。

因此，如果要删除填充，可以在css文件中覆盖这些属性。

Answer 2

需要更改

.col-xs-12{
    padding-right: 15px;
    padding-left: 15px;
}

到

.col-xs-12{
        padding-right: 0;
        padding-left: 0;
    }

目前仅为min-width: 768px

设置

@media (min-width: 768px)
.no-gutter > [class*=col-] {
    padding-right: 0;
    padding-left: 0;
}

Bootstrap：在较小的设备上看到的行边距

2 个答案: