引导麻烦了骑格/列填充

Question

发布引导github上太...问题

代码已出现在www.cocktailswithkatie.com

一切工作在PC，平板电脑和移动非常斯旺克... 除了在手机页面的底部附近以外，下边栏内容隐藏在我的内容较少的显示器中显示错误，并且像忽略我的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; 
} 

改变填充在这里大来解决这一情况的问题，改变的休息布局取决于列规则。

任何人都可以提出解决方案吗？也许以不同的方式瞄准适当的类选择器？

Answer 1

我有一个类似的问题，你所谓的罪魁祸首。

我所做的解决这个问题的方法是创建一个类并添加！对它很重要。

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

也就是说然而，看起来像是你已经尝试过，这让我觉得我没有得到这个问题有充分的了解，如果是这样，请你能不能解释一下？

Answer 2

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