左右填充引导

Question

我有这个代码

<div class="col-md-12 pt-5 let-top">
    <h1>A</h1>
</div> 

在小屏幕和xs屏幕上，我想在左侧和右侧添加填充。我该怎么办？

Answer 1

<div class="col-md-12 px-<your number> px-sm-<your number> px-md-0">

通过这种方式，您的MD在div下将在左侧和右侧有一个自定义填充，但是当您到达MD breakpoint时，它将被删除。

当然，“ px”表示两边的填充都是相同的，如果要使用不同的填充，请使用pl和pr类。

请记住，在bootsrap配置文件中，col类上已经有一个指定的装订线，这意味着每个col的侧面都会有默认填充。如果在文件中配置变量，则可以覆盖它。

Answer 2

引导程序4的大小没有xs，因此您不能使用px-xs-3（px表示双方）

诀窍是：

1. 为所有尺寸添加填充，包括sm下的尺寸：<div class="px-3">
2. 从sm到<div class="px-3 px-sm-0">上删除填充

See code example

Answer 3

将一列大小专用于填充：

<div class="col-md-12 col-xs-10 offset-xs-1  pt-5 let-top">
           <h1>A</h1>
</div>