ブートストラップ@mediaとスクリーンサイズのCSSを変更する

Question

私はCSSの変更方法に関するブートストラップ情報を見てきましたが、私はまだ混乱しています。側に少しのために（私のウェブサイトは、左右に20％paddingでロードされます、それはタブレットに行くときしかし、私はそれが10％に削減したいとモバイル2％

/* 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) { ... } 

まだ）

私のpaddingは、基本的にページの横に空白を残す、任意の助けに感謝します。

私のcssは現在これで、これは私が読んだことから理解したものです。ありがとう！

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

Answer 1

あなたの質問で説明したように、ブートストラップ、外出先でのクエリ幅から、最大彼らは私たちが欲しいものを達成するために、min-widthを使用してモバイル最初のアプローチを構築しているので、あなたがこのような何かを持っている：

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

}