css - 骑网格/列填充的 Bootstrap 问题

Question

也发布在 bootstrap github 上...

有问题的代码在 www.cocktailswithkatie.com 上可用

在个人电脑、平板电脑和移动设备上，一切都运行得很好......除了移动页面底部附近，隐藏在我的较低内容中的下边栏显示错误，并且表现得好像忽略了我的 css catch - 通过 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;
  }
}

我已经缩小了 Bootstrap 中的以下 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; 
}

然而，通过更改这里的填充以解决这种情况下的问题，会根据列规则更改布局的其余部分。

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

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