bootstrapの幅別での表示分け
col-lg-数字 = 画面サイズが≥1200pxの場合このクラスが適応されます。
col-md-数字 = 画面サイズが≥992pxの場合このクラスが適応。
col-sm-数字 = 画面サイズが≥768pxの場合このクラスが適応。
col-xs-数字 = 画面サイズが<768pxの場合このクラスが適応。
bootstrapはメディアクエリに対応している
bootstrapは別ファイルでCSSを指定しなくても
HTMLのタグの中にclass名を指定するだけで簡単に整ったデザインのページを作ることができますが、
レスポンシブデザインに対応しているという特徴もある（画面幅に合わせてレイアウトを変えること）。
通常ではCSSのメディアクエリというものを使って
レイアウトを調整することになるのですが
Bootstrapを使うと
どのような画面サイズであっても必要に応じて
自動調整して最適なレイアウトを実現することが
容易にできるのです！
しかし縦のスペースを作りたい場合は、独自にCSSで指定する必要があるらしい。
縦に余白を少し入れたい。smサイズ限定で。
というような、特定のサイズの時だけ定期用させたい場合は以下のように指定
横幅768以上(sm以上)で適用
@media (min-width: 768px) {
.generate {
margin-top: 10px;
}
}
横幅992以下(md以下)で適用
@media (max-width: 992px) {
.generate {
margin-top: 10px;
}
}
横幅768以上(sm以上)・横幅992以下(md以下)で適用
こう指定すれば、sm以下、md以上では適用されない。
/* これが正解 */
@media (min-width: 768px) and ( max-width:992px){
.generate {
margin-top: 10px;
}
}
ポイントはandで繋げてmin , maxを指定できたこと。
＊(横に余白入れたい場合はco-sm-offset-1とかで簡単にできるのだがね)。
参考
http://www.yuta-system.com/homepage/pccss3.html
https://shared-blog.kddi-web.com/bootstrap/mediaquery.html
http://www.mdesign-works.com/blog/web/responsive-design-css/
https://sole-color-blog.com/blog/71/