twitter-bootstrap - 如何在 Bootstrap 中使内容接触视口(viewport)的边缘

Question

我在使用 Twitter Bootstrap 使内容触及浏览器边缘时遇到问题。

我正在开发一个全角的网站，其中的图像触及视口(viewport)的边缘。我用过.container-fluid div 到我的 .row和 col-分区。

到目前为止我已经尝试过:

我尝试从 .container-fluid 中删除填充，但不幸的是，这会使水平滚动条出现在浏览器中；

我附加了一个自定义类，该类从单个 col-'s 中删除了填充。 ，但这似乎并不适合使用核心 Bootstrap 网格系统来实现如此简单的效果。更重要的是，目的不是去除所有排水沟，而是在第一个和最后一个 col-在 row (分别为左右排水沟)

我在我的网站上为不同的元素引入了负边距，以便它们吃掉我想要摆脱的浏览器两侧的填充 - 但是，这也会出现水平滚动条。

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

简而言之:

使用 Bootstrap 进行开发时，您如何使内容接触视口(viewport)的边缘？

Answer 1

您无需修改​​基本 css，而是创建类并根据需要使用。如果我在中间有排水沟但在外缘没有，我更喜欢为我的列制作一个 .inner 元素。而且您确实使用了溢出-x:隐藏。
演示: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;
}