Question

我正在尝试制作一个自定义的bootstrap文件，其左右填充设置为8px而不是默认的15px。填充与bootstrap.css文件中的以下内容有关：

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

但我不知道我应该在Bootstrap自定义页面中更改哪个参数。

Answer 1

我正在尝试制作一个自定义的bootstrap文件，其左右两边的填充设置为8px而不是默认的15px。

请注意，默认装订线宽度设置为30px (15px on each side of the column)。

http://getbootstrap.com/css/#grid-options

如果您希望将其更改为8px而不是15px，请将@grid-gutter-width（http://getbootstrap.com/customize/#grid-system）值从30px更改为16px。

希望这有帮助。

Answer 2

对于要在每行上应用自定义填充的情况，请将下面解决方案中的.my-custom-area替换为body。

对于只想在页面特定区域自定义填充的人，

因此您仍然可以使用默认的引导程序文件，而不会仅用一种填充大小设置卡住，可以执行以下操作：

指定覆盖默认填充的区域。在这里，我使用.my-custom-area。
例如，我们在左侧和右侧分别填充了8px的列。将区域＃1中行的边距修改为负值。 .my-custom-area .row { margin-left: -8px; margin-right: -8px;}。

*这里我们覆盖了行的默认设置，从引导文档中我们知道该行的默认边距为负值（-15px）。

修改＃1 .my-custom-area .row > .col { padding-left: 8px; padding-right: 8px; }区域中col的填充

.my-custom-area .row {
  margin-left: -8px;
  margin-right: -8px;
}
.my-custom-area .row > .col {
  padding-left: 8px;
  padding-right: 8px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="default">
  <div class="container">
    <h5>
      Default (col padding: 15px on each side)</h5>
    <div class="row">
      <div class="col col-md-4">
        <div class="card">This is 1st column</div>
      </div>
      <div class="col col-md-4">
        <div class="card">This is 2nd column</div>
      </div>
      <div class="col col-md-4">
        <div class="card">This is 3rd column</div>
      </div>
    </div>
  </div>
</div>
</div>
<br>
<div class="my-custom-area">
  <div class="container">
  <h5>Custom (col padding: 8px  on each side)</h5>
    <div class="row">
      <div class="col col-md-4">
        <div class="card">This is 1st column</div>
      </div>
      <div class="col col-md-4">
        <div class="card">This is 2nd column</div>
      </div>
      <div class="col col-md-4">
        <div class="card">This is 3rd column</div>
      </div>
    </div>
  </div>
</div>

如何自定义bootstrap列填充

2 个答案: