Bootstrap4、Bootstrap3でガター幅(余白/カラムの隙間)を調整する

Bootstrapの基本

  • カラム自体にmarginはなく余白はカラムのpaddingで指定されている。
  • カラムのpaddingは左右15px.
  • Bootstrapのカラムとカラムの間の余白スペースは15px+15pxで30pxになる
  • カラムのpaddingが左右15pxのため、右端と左端には15pxの余白が出来る。
  • クラスrowとは左右のマージンを-15pxとするクラス。その為にrowで囲むと上記の右端と左端の15pxの余白が消える。
.row {
    margin-right: -15px;
    margin-left: -15px;
   }

ガター幅(余白)を調整する

カラムとカラムの間の余白スペース15pxを追加のスタイルシートで適用すればガター幅(余白)が調整できます。

カラムの余白スペースを変更したら、その値によってズレる左右の余白の調整が必要です。

そんな面倒な計算をしなくてもいい汎用クラスを紹介しているのがこちらのページです。

【ガターの幅を変えたい!?】Bootstrapのグリッドシステムをもっと便利にするCSS(LESS)コード

LESSコードを0pxから60pxまでの汎用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;
}

使い方はrowにrow-※というクラスを追加します。

<例>余白スペースを10px、50pxにしたい

<div class="container">
<h4>余白スペースは標準(30px)</h4>
<div class="row">
    <div class="col-4">
    <img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
	</div>
    <div class="col-4">
    <img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
    </div>
    <div class="col-4">
    <img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
    </div>
</div>

<h4>余白スペースを10px</h4>
<div class="row row-10">
    <div class="col-4">
    <img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
	</div>
    <div class="col-4">
	<img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
    </div>
    <div class="col-4">
    <img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
    </div>
</div>

<h4>余白スペースを50px</h4>
<div class="row row-50">
    <div class="col-4">
    <img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
	</div>
    <div class="col-4">
	<img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
    </div>
    <div class="col-4">
    <img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
    </div>
</div>
</div>

<例>HTML

<!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="https://placehold.it/400x400" class="img-fluid" alt=""/>
	</div>
    <div class="col-4">
    <img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
    </div>
    <div class="col-4">
    <img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
    </div>
</div>

<h4>余白スペースを10px</h4>
<div class="row row-10">
    <div class="col-4">
    <img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
	</div>
    <div class="col-4">
	<img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
    </div>
    <div class="col-4">
    <img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
    </div>
</div>

<h4>余白スペースを50px</h4>
<div class="row row-50">
    <div class="col-4">
    <img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
	</div>
    <div class="col-4">
	<img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
    </div>
    <div class="col-4">
    <img src="https://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以下でのみ適用したい場合

768px以下で適用したい場合

@media screen and (max-width: 768px) {

/* CSSを記載 */

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

<!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="https://placehold.it/400x400" class="img-fluid" alt=""/>
	</div>
    <div class="col-4">
    <img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
    </div>
    <div class="col-4">
    <img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
    </div>
</div>

<h4>余白スペースを10px</h4>
<div class="row row-10">
    <div class="col-4">
    <img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
	</div>
    <div class="col-4">
	<img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
    </div>
    <div class="col-4">
    <img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
    </div>
</div>

<h4>余白スペースを50px</h4>
<div class="row row-50">
    <div class="col-4">
    <img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
	</div>
    <div class="col-4">
	<img src="https://placehold.it/400x400" class="img-fluid" alt=""/>
    </div>
    <div class="col-4">
    <img src="https://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>

 

 

コメント

タイトルとURLをコピーしました