Bootstrap 3 - 根据尺寸调整CSS

问题描述：

我知道我可以根据屏幕尺寸使用col-md或col-sm来调整布局，但是我可以使用这些相同的前缀来调整某些CSS属性。例如，我有部分帧具有属性padding:20px; - 这对于屏幕尺寸为md和lg非常适用，但对于较小的尺寸，我需要删除此填充。这是建立在引导？Bootstrap 3 - 根据尺寸调整CSS

答

您可以根据您的父类关系为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>

答

很难告诉你到底要怎样做。也许你可以提供一些你的代码。

然而，您所讨论的列定义是使用媒体查询构建到引导程序中的。

/* 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; 
    } 
}

规则

Bootstrap 3 - 根据尺寸调整CSS

相关推荐