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

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 类有一个填充。

padding-right: 15px;
padding-left: 15px;

在大于 768 像素的屏幕中，该填充设置为 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;
}