Bulma 列间隙和选项
说明
列在列内容之间创建相等的间隙，并在每列之间包含
0.75rem 的默认值。您可以在列布局尺寸的上一章中看到列之间的默认间隙。
无缝
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 允许通过在列容器上使用以下修饰符来定义列之间的
自定义间隙。
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-centric 修饰符使列居中。 Bulma 还允许添加
.is-multiline 修饰符，使多列在一行中居中。
这个简单的例子展示了列容器中
.is-centric 和
.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>
上面的代码显示以下输出-
