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-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>
上述代码显示以下输出 −
bulma_columns.html
