每个 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>
