引导3-根据大小调整CSS

我知道我可以使用

col md

或

col sm

根据屏幕大小调整布局，但我可以使用这些相同的前缀来调整某些css属性。例如，我有一个具有属性

padding:20px

-这对于

md

和

lg

屏幕尺寸非常好，但对于较小尺寸的屏幕，我需要删除此填充。这是否内置于引导中？

您可以根据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>

你的细节
@介质（最大宽度：687px）{
1.没有填充物{
左侧填充：0px；
右边填充：0px；
}
}

很难说出你真正想做什么。也许你可以提供一些代码

但是，您所讨论的列定义是使用媒体查询内置到引导中的

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