フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

Bootstrapで指定した幅(sm)の時、縦に空白を入れたい

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とかで簡単にできるのだがね)。

参考
www.yuta-system.com/homepage/pccss3.html
shared-blog.kddi-web.com/bootstrap/mediaquery.html
www.mdesign-works.com/blog/web/responsive-design-css/
sole-color-blog.com/blog/71/

[紹介元] CSSタグが付けられた新着記事 – Qiita Bootstrapで指定した幅(sm)の時、縦に空白を入れたい

コメント

記事に戻る

コメントを残す