如何在 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。

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