使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等。按需要編輯。