删除列上的填充使水平滚动条

Question

我想从引导网格列类中删除填充。

所以我做

.col-x { 
    padding: 0; 
} 

但是，这是一种打破了整个布局，因为水平滚动条出现的。

我为此创建了一个pen因此您可以看到它。

什么是导致水平滚动条，以及如何解决它？

Answer 1

.row对它们具有负边距。 .content-fluid也应用了填充。所以你只需要添加到你的CSS：

.row { 
    margin:0; 
} 
.container-fluid { 
    padding:0; 
} 

Answer 2

你有.row嵌套在你的列中的元素。 .row具有负余量，并且始终需要包含在.container中，该余额具有负余量抵消的填充。你的专栏的填充是这样做的。我只包住所有的行中.container-fluid

行被放置在一个固定的或全宽容器（分别.container或.container流体，），用于正确对准内。

/* removing padding on columns makes horizontal scrollbar */ 
 
.column { 
 
    padding: 0; 
 
} 
 

 

 
.column { 
 
    min-height: 100vh; 
 
    border-right: 1px solid #ccc; 
 
} 
 
.column-header { 
 
    border-bottom: 1px solid #ddd; 
 
} 
 
.column.sidebar { 
 
    position: fixed; 
 
    top: 0; left: 0; 
 
    border-right: 1px solid #ccc; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 

 
    <div class="col-2 column sidebar"> 
 
     fixed side 
 
    </div> 
 

 
    <div class="col-6 offset-2 column content"> 
 
     <div class="column-header mb-5"> 
 
     <div class="container-fluid"> 
 
      <div class="row"> 
 
      <div class="col-8 pt-4 pb-4 pl-5 pr-5"> 
 
       Title 
 
      </div> 
 
      <div class="col-4 pt-4 pb-4 pl-5 pr-5 text-right"> 
 
       Right 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-4 column content"> 
 
     <div class="column-header mb-5"> 
 
     <div class="container-fluid"> 
 
      <div class="row"> 
 
      <div class="col-8 pt-4 pb-4 pl-5 pr-5"> 
 
       Title 
 
      </div> 
 
      <div class="col-4 pt-4 pb-4 pl-5 pr-5 text-right"> 
 
       Right 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>