Html 使引导列填充因屏幕大小不同而不同

有没有办法根据屏幕大小使引导列的填充或边距不同

我有这样的专栏

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

。。。
...

我想在每个屏幕大小有不同的填充，尤其是在最小的屏幕大小。这可能吗

有人能举个例子吗？

你可以使用

@media（）{}

，根据屏幕的大小，你可以使用它来制作填充物和列，你也可以使用

！重要信息

覆盖默认列sm/xs边距和填充。

.testdiv{padding:20px}
@介质（最大宽度：767px）{
.test div{padding:30px}
}

。。。
…

引导使用以下变量定义填充：

• 垫底垂直
• 垫底水平
• 填充大垂直：
• 填充大水平
• 填充小垂直
• 填充小水平
• 垂直填充
• 水平填充

让我们使用padding base vertical作为示例。如果使用较少，则在主样式表中执行以下操作：

// 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，那么方法就有点不同，而且更简单。查找并找到$padding base vertical等。根据需要进行编辑。

您可以自定义您的css（填充），您可以使用

媒体查询