Bulma - 响应式列和嵌套
描述
Bulma 在不同类型的屏幕(如移动设备、平板电脑和台式机)中提供响应式列。您可以在移动设备上显示列，方法是在 columns 容器中添加 is-mobile 修饰符；或者，如果您希望仅在台式机上显示列，请在 columns 容器中添加 is-desktop 修饰符。
让我们为移动设备和台式机列创建一个简单的示例，如下所示 −
<!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">
Mobile Columns
</span>
<br>
<br>
<div class = "columns is-mobile">
<div class = "column">
<p class = "has-text-black has-background-info">First column</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-info">Second column</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-info">Third column</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-info">Fourth column</p>
</div>
</div>
<br>
<span class = "title">
Desktop Columns
</span><br><br>
<div class = "columns is-desktop">
<div class = "column">
<p class = "has-text-black has-background-info">First column</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-info">Second column</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-info">Third column</p>
</div>
<div class = "column">
<p class = "has-text-black has-background-info">Fourth column</p>
</div>
</div>
</div>
</section>
</body>
</html>
它显示如下所示的输出 −
嵌套列
Bulma 允许将列嵌套在另一列中以构建响应式列。
以下简单示例演示了列的嵌套 −
<!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">
Nesting Columns
</span>
<br>
<br>
<div class = "columns">
<div class = "column">
<p class = "has-background-info">First column</p>
<div class = "columns is-mobile">
<div class = "column is-size-6">
<p class = "has-background-primary">First nested column</p>
</div>
<div class = "column is-size-6">
<p class = "has-background-primary">Second nested column</p>
</div>
</div>
</div>
<div class = "column">
<p class = "has-background-info">Second column</p>
<div class = "columns is-mobile">
<div class = "column is-4">
<p class = "has-background-primary">is-4</p>
</div>
<div class = "column is-5">
<p class = "has-background-primary">is-5</p>
</div>
<div class = "column is-3">
<p class = "has-background-primary">is-3</p>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
它显示如下所示的输出 −
bulma_columns.html
