骑网格/列填充的引导问题答案

【问题标题】：Bootstrap trouble over riding grid/column padding骑网格/列填充的引导问题
【发布时间】：2016-09-13 05:39:16
【问题描述】：

也发布在引导 github 上...

相关代码已在 www.cocktailswithkatie.com 上发布

在个人电脑、平板电脑和移动设备上，一切都非常出色...... 除了在移动设备页面的底部附近，隐藏在我的较低内容中的下侧边栏显示错误，并且就像它忽略了我的 css 捕获一样 - 通过 chrome 开发人员工具进行的移动仿真显示它工作正常，但在我的 iphone5 上它看起来因为它忽略了以下规则。

@media only screen and (min-width: 320px) and (max-device-width: 568px),
@media only screen and (min-width: 360px) and (max-device-width: 640px),
@media all and (max-width: 768px) {
  .lower-content lower-sidebar.col-xs-12 {
    padding: 2em 0 0 0;
  }
}

我已经缩小范围，引导程序中的以下 css 规则似乎导致了冲突：

/* culprit! */
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px; 
}

然而，为了解决这种情况问题，在此处更改整个填充，会根据列规则更改布局的其余部分。

谁能提出解决方案？也许以不同的方式定位适当的类选择器？

【问题讨论】：

标签： css twitter-bootstrap grid padding

【解决方案1】：

你的 css 规则应该是这样的：

@media only screen and (min-width: 320px) and (max-device-width: 568px),
@media only screen and (min-width: 360px) and (max-device-width: 640px),
@media all and (max-width: 768px) {
  .lower-content .lower-sidebar.col-xs-12 {
    padding: 2em 0 0 0;
  }
}

【讨论】：

我一定已经读了三四遍了。你的语法似乎和我的一样，除非我遗漏了什么。
@heliumdream 实际上你错过了一些东西！ .lower-sidebar 而不是 lower-sidebar

【解决方案2】：

我对你所说的罪魁祸首也有类似的问题。

我为解决这个问题所做的只是创建一个类并将 !important 添加到它。

.new-padding{
    padding: 2em 0 0 0 !important;
}

但是，您似乎已经尝试过，这让我觉得我没有完全理解这个问题，如果是这样，请您详细说明一下吗？

【讨论】：