Question

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

所以我做了

.col-x {
    padding: 0;
}

但这会破坏整个布局，因为会出现水平滚动条。

我为此创建了 pen ，以便您可以看到它。

导致水平滚动条的原因是什么以及如何修复它？

Answer 1

c1,c2,c3,c4的余额为负值。 .row也应用了填充。所以你只需要将它添加到你的CSS：

.content-fluid

Answer 2

您的列中嵌套了.row个元素。 .row有一个负边距，并且总是需要包含在.container中，其中填充了负边距抵消。列上的填充正在这样做。我只想将所有行包装在.container-fluid

中

将行放置在固定或全宽容器（分别为.container或.container-fluid）内，以便正确对齐。

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: