Bootstrap Ärger über Reiten grid/Spalte padding

Question

auch auf dem Bootstrap Github Posted ...

betreffenden Code ist live auf www.cocktailswithkatie.com

alles funktioniert ziemlich Swank auf dem PC, Tablet und Handy ... außer in der Nähe der Unterseite der Seite auf Handy, die unteren Seitenleiste versteckt in meinem unteren Inhalt zeigt falsch, und verhält sich wie Ignorieren meiner CSS-Catch - mobile Emulation durch Chrome Entwickler-Tools zeigt es funktioniert einwandfrei, aber weiterleben Mein iphone5 sieht so aus, als würde es die folgende Regel ignorieren.

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

Ich habe, dass die folgende CSS-Regel um eine Kollision zu werden in Bootstrap verengt erscheint verursacht:

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

jedoch die Änderung der Polsterung hier im Allgemeinen diesen einen Fall Problem zu beheben, ändert den Rest Das Layout hängt von den Spaltenregeln ab.

Kann jemand eine Lösung vorschlagen? Vielleicht die Klassenselektoren auf andere Weise ansprechen?

Answer 1

Ich hatte ein ähnliches Problem mit dem, was Sie Täter nennen.

Alles, was ich getan habe, um das Problem zu beheben, war eine Klasse erstellen und hinzufügen!

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

Dass aber etwas scheint, wie Sie bereits versucht haben wird, die ich mir erarbeiten bin nicht denken läßt ein volles Verständnis des Problems bekommen, wenn ja, könnten Sie bitte?

Answer 2

Ihre CSS-Regel sollte wie folgt sein:

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