html - 为不同的屏幕尺寸制作不同的 Bootstrap 列填充

Question

有没有办法根据屏幕尺寸使 bootstrap 列的填充或边距不同？

我有这样的专栏

<div class="col-sm-4 col-xs-12">...</div>
<div class="col-sm-8 col-xs-12">...</div>

我想在每个屏幕尺寸下使用不同的填充，尤其是在最小屏幕尺寸下。这可能吗？

有人能举个例子吗？

Answer 1

Bootstrap 使用以下变量来定义填充:

• padding-base-vertical
• 填充基水平
• padding-large-vertical:
• 填充大水平
• padding-small-vertical
• padding-small-horizo​​ntal
• padding-xs-vertical
• padding-xs-水平

让我们以 padding-base-vertical 为例。如果你正在使用 Less，那么在你的主样式表中做这样的事情:

// import bootstrap.less into your stylesheet
@import vendor/bootstrap.less
// set padding and other styles
body {
  color: #444;
  @padding-base-vertical: 10px;
  @media all and (min-width: 768px) {
    @padding-base-vertical: 15px;
  }
}

如果您使用的是 Sass，则方法略有不同，而且更简单。寻找 _variables.scss file并找到 $padding-base-vertical 等。根据需要进行编辑。