Css 自举故障超过了行驶栅格/立柱填充

也发布在引导github上

有关代码在www.cocktailswithkatie.com上直播

在pc、平板电脑和移动设备上，一切都非常出色。。。 除了在手机上的页面底部附近，隐藏在我较低内容中的较低侧边栏显示错误，就像它忽略了我的css捕获一样-通过chrome开发者工具进行的移动仿真显示它工作正常，但在我的iPhone 5上，它似乎忽略了以下规则

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

然而，改变这里的填充来解决这个单一情况的问题，会根据列规则改变布局的其余部分

---

有人能提出解决办法吗？也许是以不同的方式针对适当的类选择器？

我对您所谓的罪魁祸首也有类似的问题

我所做的只是创建一个类并添加！对它很重要

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

---

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

您的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