每个 Bulma 网格由多个单元格组成。你可以单独调整每个单元格的宽度和高度，以及每个单独的断点。
赞助商
网格单元格
调整每个单个单元格的宽度和高度
| 说明 | 类 | 示例 |
|---|---|---|
| 单元格起始的列 | is-col-start |
|
| 单元格结束的列，从末尾开始计数 | is-col-from-end |
|
| 单元格将跨越多少列 | is-col-span |
|
| 单元格起始的行 | is-row-start |
|
| 单元格结束的行，从末尾开始计数 | is-row-from-end |
|
| 单元格将跨越多少行 | is-row-span |
|
列起始 #
从末尾开始计数，更改单元格结束的列。
单元格 1
单元格 2
单元格 3
单元格 4
单元格 5
单元格 6
HTML
<div class="fixed-grid has-4-cols">
<div class="grid">
<div class="cell">Cell 1</div>
<div class="cell is-col-start-3">Cell 2</div>
<div class="cell">Cell 3</div>
<div class="cell">Cell 4</div>
<div class="cell">Cell 5</div>
<div class="cell">Cell 6</div>
</div>
</div>列从末尾开始 #
更改单元格起始的列。
单元格 1
单元格 2
单元格 3
单元格 4
单元格 5
单元格 6
HTML
<div class="fixed-grid has-4-cols">
<div class="grid">
<div class="cell">Cell 1</div>
<div class="cell is-col-from-end-2">Cell 2</div>
<div class="cell">Cell 3</div>
<div class="cell">Cell 4</div>
<div class="cell">Cell 5</div>
<div class="cell">Cell 6</div>
</div>
</div>列跨度 #
更改单元格跨越的列数。
单元格 1
单元格 2
单元格 3
单元格 4
单元格 5
单元格 6
HTML
<div class="fixed-grid has-4-cols">
<div class="grid">
<div class="cell">Cell 1</div>
<div class="cell is-col-span-2">Cell 2</div>
<div class="cell">Cell 3</div>
<div class="cell">Cell 4</div>
<div class="cell">Cell 5</div>
<div class="cell">Cell 6</div>
</div>
</div>行起始 #
从末尾开始计数，更改单元格结束的行。
单元格 1
单元格 2
单元格 3
单元格 4
单元格 5
单元格 6
HTML
<div class="fixed-grid has-4-cols">
<div class="grid">
<div class="cell">Cell 1</div>
<div class="cell is-row-start-3">Cell 2</div>
<div class="cell">Cell 3</div>
<div class="cell">Cell 4</div>
<div class="cell">Cell 5</div>
<div class="cell">Cell 6</div>
</div>
</div>行从末尾开始 #
更改单元格起始的行。
单元格 1
单元格 2
单元格 3
单元格 4
单元格 5
单元格 6
HTML
<div class="fixed-grid has-4-cols">
<div class="grid">
<div class="cell">Cell 1</div>
<div class="cell is-row-from-end-1">Cell 2</div>
<div class="cell">Cell 3</div>
<div class="cell">Cell 4</div>
<div class="cell">Cell 5</div>
<div class="cell">Cell 6</div>
</div>
</div>行跨度 #
更改单元格跨越的行数。
单元格 1
单元格 2
单元格 3
单元格 4
单元格 5
单元格 6
HTML
<div class="fixed-grid has-4-cols">
<div class="grid">
<div class="cell">Cell 1</div>
<div class="cell is-row-span-2">Cell 2</div>
<div class="cell">Cell 3</div>
<div class="cell">Cell 4</div>
<div class="cell">Cell 5</div>
<div class="cell">Cell 6</div>
</div>
</div>