使Bootstrap列填充对于不同的屏幕大小有所不同

Question

是否有一种方法可以根据哪个屏幕大小为列设置不同的引导列填充或页边距？

我有这样

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

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

有人可以举个例子吗？

Answer 1

你可以使用，你可以用来做取决于屏幕的大小，填充和列@media(){}，你可能还需要使用!important覆盖默认COL-SM/XS margin和padding。

Answer 2

.test-div{ padding:20px} 
 
@media (max-width:767px){ 
 
    .test-div{ padding:30px} 
 
}

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

比如，你可以编写自己的代码

Answer 3

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

• 填充基垂直
• 填充水平方向
• 填充-大垂直：
• 填充-大水平
• 填充小垂直
• 填充小水平
• 填充-XS-垂直
• 填充-XS-水平

我们以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; 
    } 
} 

如果使用萨斯，这种方法有点不同，也更容易。寻找_variables.scss file并找到$ padding-base-vertical等。按需要编辑。