如何使内容触摸Bootstrap中视口的边缘

Question

我无法通过Twitter Bootstrap使内容触及浏览器的边缘。

我正在开发一个全宽的网站，其中有图像触及视口的边缘。我已将.container-fluid div用于我的.row和col- div。

到目前为止我尝试过：

1. 我尝试从.container-fluid删除填充，但不幸的是，这会使水平滚动条显示在浏览器中;
2. 我附加了一个自定义类，用于删除单个col-'s的填充，但是使用核心Bootstrap网格系统来实现这么简单的效果似乎不对。更重要的是，目的不是要移除所有排水沟，而是放在col-中的第一个和最后一个row（分别是左右排水沟）
3. 我在网站上的不同元素中引入了负边距，这样它们就会占用浏览器两侧的填充，我想要摆脱它 - 但是，这样也会出现水平滚动条。

我已经在网上找到了解决这个问题的方法，但不幸的是，没有提供明确的答案。

简明扼要地说：

使用Bootstrap进行开发时，如何使内容触摸视口的边缘？

Answer 1

您不修改基本css，创建类并根据需要使用。如果我的中间有排水沟而不是外边缘，我更喜欢为我的柱子制作.inner元素。你确实使用overflow-x：hidden。

DEMO：http://jsbin.com/lujedi/1/

http://jsbin.com/lujedi/1/edit?html,css,output

<强> HTML：

         <div class="container-fluid full-width">
            <div class="row row-no-gutter">
               <div class="col-xs-6 col-sm-3">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" />    
               </div>
               <!-- close .col -->
               <div class="col-xs-6 col-sm-3">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" />    
               </div>
               <!-- close .col -->
               <div class="col-xs-6 col-sm-3">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" />    
               </div>
               <!-- close .col -->
               <div class="col-xs-6 col-sm-3">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" /> 
               </div>
               <!-- close .col -->
            </div>
         </div>
         <!-- close .container-fluid full-width -->

  <hr>

         <div class="container-fluid full-width has-inner">
            <div class="row row-no-gutter">
               <div class="col-xs-6 col-sm-3">
                 <div class="inner">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" />
                 </div>
               </div>
               <!-- close .col -->
               <div class="col-xs-6 col-sm-3">
                 <div class="inner">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" />
                 </div>
               </div>
               <!-- close .col -->
               <div class="col-xs-6 col-sm-3">
                 <div class="inner">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" />
                 </div>
               </div>
               <!-- close .col -->
               <div class="col-xs-6 col-sm-3">
                 <div class="inner">
                     <img src="http://placekitten.com/g/500/400" class="img-full-width" alt="" />
                 </div>
               </div>
               <!-- close .col -->
            </div>
         </div>
         <!-- close .container-fluid full-width -->

<强> CSS

.container-fluid.full-width {
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
}
.row.row-no-gutter {
    margin: 0
}
.row.row-no-gutter [class*="col-"] {
    padding: 0
}
.img-full-width {
    width: 100.5%;
    height: auto;
}
.has-inner .row.row-no-gutter {
    margin-left: -10px;
    margin-right: -10px;
}
.row.row-no-gutter .inner {
    padding-left: 10px;
    padding-right: 10px;
}

Answer 2

感谢您的建议。与此同时，我一直在测试代码，并得出了这个解决方案 - 这也解决了我的问题：

.no-gutter [class*="col-"]:first-child  {
padding-left:0;
}

.no-gutter [class*="col-"]:last-child {
padding-right: 0;
}