对于不同的屏幕尺寸，使Bootstrap列填充不同

Question

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

我有这样的列

<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi</artifactId>
<version>*</version>

</dependency>

 <dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-ooxml</artifactId>
<version>*</version>

</dependency>

我想在每个屏幕尺寸上有不同的填充，特别是在最小的屏幕尺寸。这可能吗？

有人能举个例子吗？

Answer 1

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

• 填充碱基垂直
• 填充碱基水平
• 填充-大垂直：
• 填充-大水平
• 填充小垂直
• 填充小水平
• 填充-XS-垂直
• 填充-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等。根据需要进行编辑。

Answer 2

你可以使用@media(){}来制作填充和列，具体取决于屏幕的大小，你也可以使用!important覆盖默认的col-sm / xs边距和填充。