カラム両脇の空白を無くす（no-gutters）
Bootstrapの各カラムは左右に15pxの余白がデフォルト、この余白を0にしたい場合はBootstrap4では新クラス「.no-gutters」を使います。「row」にクラス追加するのがポイント。
|
1 2 3 4 |
<div class="row no-gutters"> <div class="col-sm"><img src="http://placehold.it/1000x400" class="img-fluid" alt=""/></div> <div class="col-sm"><img src="http://placehold.it/1000x400" class="img-fluid" alt=""/></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 |
<!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>Bootstrap4 カラムの隙間をゼロにする</title> </head> <body> <!-- コンテンツ --> <div class="container"> <h3>no-gutters無し</h3> <div class="row"> <div class="col-sm"><img src="http://placehold.it/1000x400" class="img-fluid" alt=""/></div> <div class="col-sm"><img src="http://placehold.it/1000x400" class="img-fluid" alt=""/></div> </div> <div class="w-100 my-4"></div> <h3>no-guttersあり</h3> <div class="row no-gutters"> <div class="col-sm"><img src="http://placehold.it/1000x400" class="img-fluid" alt=""/></div> <div class="col-sm"><img src="http://placehold.it/1000x400" class="img-fluid" alt=""/></div> </div> </div> <!-- /コンテンツ --> <!-- jquery --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <!-- Bootstrap JS --> <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> |
内容は下記ですがCSS記載の必要はありません。
|
1 2 3 4 5 6 7 8 9 10 |
.no-gutters { margin-right: 0; margin-left: 0; > .col, > [class*="col-"] { padding-right: 0; padding-left: 0; } } |
カラム両脇の空白を少しにする
ゼロは駄目だけどページ全体の空白を少し詰めたい、そんな時は「no-gutters」を改造しても実現できます。
|
1 2 3 4 5 6 7 8 9 |
.no-gutters { margin-right: -5px; margin-left: -5px; } .no-gutters > .col, .no-gutters > [class*="col-"] { padding-right: 5px; padding-left: 5px; } |
Bootstrap CSS よりも後に上記CSSを追加して「no-gutters」を上書き。
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 |
<!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>Bootstrap4 カラムの隙間を少しにする</title> <style> .no-gutters { margin-right: -5px; margin-left: -5px; } .no-gutters > .col, .no-gutters > [class*="col-"] { padding-right: 5px; padding-left: 5px; } </style> </head> <body> <!-- コンテンツ --> <div class="container"> <h3>no-gutters無し</h3> <div class="row"> <div class="col-sm"><img src="http://placehold.it/1000x400" class="img-fluid" alt=""/></div> <div class="col-sm"><img src="http://placehold.it/1000x400" class="img-fluid" alt=""/></div> </div> <div class="w-100 my-4"></div> <h3>no-guttersあり</h3> <div class="row no-gutters"> <div class="col-sm"><img src="http://placehold.it/1000x400" class="img-fluid" alt=""/></div> <div class="col-sm"><img src="http://placehold.it/1000x400" class="img-fluid" alt=""/></div> </div> </div> <!-- /コンテンツ --> <!-- jquery --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <!-- Bootstrap JS --> <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> |
カラム両脇の空白を細かく設定したい
そんな場合は下記記事を参考にしてください。
Bootstrap4、Bootstrap3でガター幅（余白/カラムの隙間）を調整する
Bootstrapの基本 カラム自体にmarginはなく余白はカラムのpaddingで指定されている。 カラムのpaddingは左右15px. Bootstrapのカラムとカラムの間の余白スペースは15px＋15pxで30pxになる。 カラ...
studio-kokopelli.com
2018.04.17
コメント