Bootstrapの基本
- カラム自体にmarginはなく余白はカラムのpaddingで指定されている。
- カラムのpaddingは左右15px.
- Bootstrapのカラムとカラムの間の余白スペースは15px＋15pxで30pxになる。
- カラムのpaddingが左右15pxのため、右端と左端には15pxの余白が出来る。
- クラスrowとは左右のマージンを-15pxとするクラス。その為にrowで囲むと上記の右端と左端の15pxの余白が消える。
|
1 2 3 4 |
.row { margin-right: -15px; margin-left: -15px; } |
ガター幅（余白）を調整する
カラムとカラムの間の余白スペース15pxを追加のスタイルシートで適用すればガター幅（余白）が調整できます。
カラムの余白スペースを変更したら、その値によってズレる左右の余白の調整が必要です。
そんな面倒な計算をしなくてもいい汎用クラスを紹介しているのがこちらのページです。
【ガターの幅を変えたい！？】Bootstrapのグリッドシステムをもっと便利にするCSS(LESS)コード
LESSコードを0pxから60pxまでの汎用CSSにしたのがこちらです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
/* ガター幅（余白）を調整 */ .row-0 { margin-left:0px; margin-right:0px; } .row-0>div { padding-right:0px; padding-left:0px; } .row-10 { margin-left:-5px; margin-right:-5px; } .row-10>div { padding-right:5px; padding-left:5px; } .row-20 { margin-left:-10px; margin-right:-10px; } .row-20>div { padding-right:10px; padding-left:10px; } .row-30{ margin-left:-15px; margin-right:-15px; } .row-30>div { padding-right:15px; padding-left:15px; } .row-40{ margin-left:-20px; margin-right:-20px; } .row-40>div{ padding-right:20px; padding-left:20px; } .row-50{ margin-left:-25px; margin-right:-25px; } .row-50>div{ padding-right:25px; padding-left:25px; } .row-60{ margin-left:-30px; margin-right:-30px; } .row-60>div{ padding-right:30px; padding-left:30px; } |
使い方はrowにrow-※というクラスを追加します。
＜例＞余白スペースを10px、50pxにしたい
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<div class="container"> <h4>余白スペースは標準（30px）</h4> <div class="row"> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> </div> <h4>余白スペースを10px</h4> <div class="row row-10"> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> </div> <h4>余白スペースを50px</h4> <div class="row row-50"> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> </div> </div> |
＜例＞HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Bootstrapのガター幅を調整</title> </head> <style> /* Bootstrapのガター幅を調整するための汎用CSS */ .row-0 { margin-left:0px; margin-right:0px; } .row-0>div { padding-right:0px; padding-left:0px; } .row-10 { margin-left:-5px; margin-right:-5px; } .row-10>div { padding-right:5px; padding-left:5px; } .row-20 { margin-left:-10px; margin-right:-10px; } .row-20>div { padding-right:10px; padding-left:10px; } .row-30{ margin-left:-15px; margin-right:-15px; } .row-30>div { padding-right:15px; padding-left:15px; } .row-40{ margin-left:-20px; margin-right:-20px; } .row-40>div{ padding-right:20px; padding-left:20px; } .row-50{ margin-left:-25px; margin-right:-25px; } .row-50>div{ padding-right:25px; padding-left:25px; } .row-60{ margin-left:-30px; margin-right:-30px; } .row-60>div{ padding-right:30px; padding-left:30px; } </style> <body> <!-- コンテンツ --> <div class="container"> <h4>余白スペースは標準（30px）</h4> <div class="row"> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> </div> <h4>余白スペースを10px</h4> <div class="row row-10"> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> </div> <h4>余白スペースを50px</h4> <div class="row row-50"> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> </div> </div> <!-- /コンテンツ --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html> |
768px以下でのみ適用したい場合
|
1 2 3 4 5 6 7 |
768px以下で適用したい場合 @media screen and (max-width: 768px) { /* CSSを記載 */ } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
/* Bootstrapのガター幅を調整するための汎用CSS（スマホ） */ @media screen and (max-width: 768px) { .row-0 { margin-left:0px; margin-right:0px; } .row-0>div { padding-right:0px; padding-left:0px; } .row-10 { margin-left:-5px; margin-right:-5px; } .row-10>div { padding-right:5px; padding-left:5px; } .row-20 { margin-left:-10px; margin-right:-10px; } .row-20>div { padding-right:10px; padding-left:10px; } .row-30{ margin-left:-15px; margin-right:-15px; } .row-30>div { padding-right:15px; padding-left:15px; } .row-40{ margin-left:-20px; margin-right:-20px; } .row-40>div{ padding-right:20px; padding-left:20px; } .row-50{ margin-left:-25px; margin-right:-25px; } .row-50>div{ padding-right:25px; padding-left:25px; } .row-60{ margin-left:-30px; margin-right:-30px; } .row-60>div{ padding-right:30px; padding-left:30px; } } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Bootstrapのガター幅を調整（スマホ）</title> </head> <style> /* Bootstrapのガター幅を調整するための汎用CSS（スマホ） */ @media screen and (max-width: 768px) { .row-0 { margin-left:0px; margin-right:0px; } .row-0>div { padding-right:0px; padding-left:0px; } .row-10 { margin-left:-5px; margin-right:-5px; } .row-10>div { padding-right:5px; padding-left:5px; } .row-20 { margin-left:-10px; margin-right:-10px; } .row-20>div { padding-right:10px; padding-left:10px; } .row-30{ margin-left:-15px; margin-right:-15px; } .row-30>div { padding-right:15px; padding-left:15px; } .row-40{ margin-left:-20px; margin-right:-20px; } .row-40>div{ padding-right:20px; padding-left:20px; } .row-50{ margin-left:-25px; margin-right:-25px; } .row-50>div{ padding-right:25px; padding-left:25px; } .row-60{ margin-left:-30px; margin-right:-30px; } .row-60>div{ padding-right:30px; padding-left:30px; } } </style> <body> <!-- コンテンツ --> <div class="container"> <h4>余白スペースは標準（30px）</h4> <div class="row"> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> </div> <h4>余白スペースを10px</h4> <div class="row row-10"> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> </div> <h4>余白スペースを50px</h4> <div class="row row-50"> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> <div class="col-4"> <img src="http://placehold.it/400x400" class="img-fluid" alt=""/> </div> </div> </div> <!-- /コンテンツ --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html> |
コメント