Bulma-columns-gap-options
提供：Dev Guides
Bulma-列のギャップとオプション
説明
列は列の内容間に等しいギャップを作成し、各列の間に_0.75rem_のデフォルト値が含まれます。 link：bulma_column_layout_sizes [Column Layout Sizes]の前の章で、列間のデフォルトのギャップを確認できます。
ギャップレス
Bulmaでは、コンテナに_is-gapless_修飾子を追加することにより、列間のスペースを削除できます。
_columns_コンテナ内の_is-gapless_修飾子の簡単な例を見てみましょう-
_ 注-コーディンググラウンド出力ウィンドウのサイズを変更して、ウィンドウサイズに応じて発生する変更を確認します。_
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Columns Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Gapless
</span>
<br>
<br>
<div class = "columns is-gapless">
<div class = "column">
<p class = "has-background-info">No Gap</p>
</div>
<div class = "column">
<p class = "has-background-primary">No Gap</p>
</div>
<div class = "column">
<p class = "has-background-warning">No Gap</p>
</div>
<div class = "column">
<p class = "has-background-info">No Gap</p>
</div>
</div>
</div>
</section>
</body>
</html>以下の出力が表示されます-
可変ギャップ
Bulmaでは、列コンテナで以下の修飾子を使用して、列間の_custom gap_を定義できます。
- is-0-列間のギャップを削除します。
- is-3-_0.75rem_値のデフォルト値でギャップを指定します。 *is-8-_2rem_値でギャップを指定します。
_columns_コンテナで上記の修飾子を使用して、列間の可変ギャップを定義するための例を作成しましょう-
* 注*-コーディンググラウンド出力ウィンドウのサイズを変更して、ウィンドウサイズに応じて発生する変更を確認します。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Columns Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Using is-0 variable Gap
</span>
<br>
<br>
<div class = "columns is-variable is-0">
<div class = "column is-4">
<div class = "has-background-info has-text-centered">
Side
</div>
</div>
<div class = "column is-8">
<div class = "has-background-primary has-text-centered">
Main
</div>
</div>
</div>
<span class = "title">
Using is-3 variable Gap
</span>
<br>
<br>
<div class = "columns is-variable is-3">
<div class = "column is-3">
<div class = "has-background-info has-text-centered">
Three columns
</div>
</div>
<div class = "column is-6">
<div class = "has-background-primary has-text-centered">
Three columns
</div>
</div>
<div class = "column is-3">
<div class = "has-background-info has-text-centered">
Three columns
</div>
</div>
</div>
<span class = "title">
Using is-8 variable Gap
</span>
<br>
<br>
<div class = "columns is-variable is-8">
<div class = "column">
<div class = "has-background-info has-text-centered">
1
</div>
</div>
<div class = "column">
<div class = "has-background-info has-text-centered">
2
</div>
</div>
<div class = "column">
<div class = "has-background-info has-text-centered">
3
</div>
</div>
<div class = "column">
<div class = "has-background-info has-text-centered">
4
</div>
</div>
<div class = "column">
<div class = "has-background-info has-text-centered">
5
</div>
</div>
<div class = "column">
<div class = "has-background-info has-text-centered">
6
</div>
</div>
<div class = "column">
<div class = "has-background-info has-text-centered">
7
</div>
</div>
<div class = "column">
<div class = "has-background-info has-text-centered">
8
</div>
</div>
<div class = "column">
<div class = "has-background-info has-text-centered">
9
</div>
</div>
<div class = "column">
<div class = "has-background-info has-text-centered">
10
</div>
</div>
<div class = "column">
<div class = "has-background-info has-text-centered">
11
</div>
</div>
<div class = "column">
<div class = "has-background-info has-text-centered">
12
</div>
</div>
</div>
</div>
</section>
</body>
</html>以下の出力が表示されます-
列の中央揃え
列コンテナーで_.is-centered_修飾子を使用して、列を中央に配置できます。 また、Bulmaでは_.is-multiline_修飾子を追加して、複数の列を単一の行の中央に配置できます。
単純な例は、列コンテナでの_.is-centered_および_.is-multiline_修飾子の使用方法を示しています-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Columns Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Centering Column
</span>
<br>
<br>
<div class = "columns is-mobile is-centered">
<div class = "column is-one-quarter">
<p class = "has-background-info">
is-one-quarter
</p>
</div>
</div>
<span class = "title">
Centering Columns with Multiline
</span>
<br>
<br>
<div class = "columns is-mobile is-multiline is-centered">
<div class = "column is-narrow">
<p class = "has-background-info">
Column One
</p>
</div>
<div class = "column is-narrow">
<p class = "has-background-info">
Column Two
</p>
</div>
<div class = "column is-narrow">
<p class = "has-background-info">
Column Three
</p>
</div>
<div class = "column is-narrow">
<p class = "has-background-info">
Column Four
</p>
</div>
</div>
</div>
</section>
</body>
</html>上記のコードは、次の出力を表示します-
