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

Question

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

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

到目前为止我尝试了什么:

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

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

简明扼要地说:

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

Answer 1

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

演示: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;
}