Question

我知道我可以使用col-md或col-sm根据屏幕大小调整布局，但是我可以使用这些相同的前缀来调整某些css属性。例如，我的部分框架具有属性padding:20px; - 这对于md和lg屏幕尺寸很有用，但对于较小的尺寸，我需要删除此填充。这是内置的bootstrap吗？

Answer 1

您可以根据父类关系设置媒体查询，例如

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

Bootstrap 3 - 根据大小调整CSS

2 个答案: