Bootstrap 3 - 根據尺寸調整CSS

Question

我知道我可以根據屏幕尺寸使用col-md或col-sm來調整佈局，但是我可以使用這些相同的前綴來調整某些CSS屬性。例如，我有部分幀具有屬性padding:20px; - 這對於屏幕尺寸爲md和lg非常適用，但對於較小的尺寸，我需要刪除此填充。這是建立在引導？

Answer 1

您可以根據您的父類關係爲ex設置媒體查詢。

<div class="container photoswide-container"> 
     <div class="row"> 
      <div class="col-md-3 col-sm-3 no-padding"> 
       Your Details 
      </div> 
     </div> 
</div> 

<style> 
@media(max-width:687px){ 
     .no-padding{ 
      padding-left: 0px; 
      padding-right: 0px; 
     } 
} 
</style> 

Answer 2

很難告訴你到底要怎樣做。也許你可以提供一些你的代碼。

然而，您所討論的列定義是使用媒體查詢構建到引導程序中的。

/* bootstrap css for small screens */ 
@media (min-width: 768px) { 
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { 
    float: left; 
    } 
    .col-sm-12 { 
    width: 100%; 
    } 
    .col-sm-11 { 
    width: 91.66666667%; 
    } 
    .col-sm-10 { 
    width: 83.33333333%; 
    } 
    .col-sm-9 { 
    width: 75%; 
    } 
    .col-sm-8 { 
    width: 66.66666667%; 
    } 
    /* and some more */ 
} 

您當然可以調整這些樣式規則並添加或刪除填充。但是，建議不要編輯原始引導程序文件，而要創建一個覆蓋引導程序規則的新文件。

您的自定義CSS文件可能包含這樣

@media (min-width: 768px) { 
    .sections .col-sm-1, .sections .col-sm-2 /* and so on */ { 
     padding: 0; 
    } 
} 

規則