Bootstrap @media und Ändern von CSS auf der Bildschirmgröße

Question

Ich habe Bootstraps Informationen darüber, wie man CSS ändern, aber ich bin immer noch verwirrt.

/* Extra small devices (phones, less than 768px) */ 
/* No media query since this is the default in Bootstrap */ 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: @screen-sm-min) { ... } 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @screen-md-min) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @screen-lg-min) { ... } 

Meine Website mit einem 20% lädt in wird padding auf dem links und rechts, aber wenn es um Tabletten geht ich mag es auf 10% reduzieren und mobiles 2% dann (für ein wenig auf der Seite immer noch)

mein padding lässt im Grunde leere Leerzeichen auf der Seite der Seite, jede Hilfe wird geschätzt.

Mein CSS ist derzeit dies und das ist, was ich verstanden habe von dem, was ich lese, danke!

@media (min-width: @screen-sm-min) { 
    .content { 
    padding-left: 20%; 
    padding-right: 20%; 
    } 
} 

Answer 1

wie in Ihrer Frage erklärt, Bootstrap die Abfragen in der Breite gehen und weil sie wir mobile ersten Ansatz min-width gebaut sind, so zu erreichen, was Sie wollen, müssen Sie etwas wie folgt aus:

/* Extra Small devices (Phones, 768px and down) */ 
@media (max-width:768px) { /*screen-xs-max Less variable*/ 
    .content { 
    padding-left: 2%; 
    padding-right: 2%; 
    } 
} 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: 768px) { /*screen-sm-min Less variable*/ 
    .content { 
    padding-left: 10%; 
    padding-right: 10%; 
    } 
} 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: 992px) { /*screen-md-min Less variable*/ 
    .content { 
    padding-left: 20%; 
    padding-right: 20%; 
    } 
} 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: 1200px) { /*screen-lg-min Less variable*/ 

}