Semantic-UI grid：跨越每行不同计数的网格中的列

Question

我有一个语义 UI 网格，每行 "odd" 列数：

<div class="ui grid">
   <div class="seven column row">
       <div class="column">ABC</div>
       <div class="column">DEF</div>
       <div class="column">GHI</div>
       <div class="column">JKL</div>
       <div class="column">MNO</div>
       <div class="column">PQR</div>
   </div>

我希望 "PQR" 单元格跨越两个非标准大小的列（最后两个）。

使用 "column two wide" 无效。

谁能告诉我怎么做？

Answer 1

Semantic-UI 默认使用 16 列网格。您可以通过调整 theming variables.

来针对您的 Web 应用更改此设置

如果你不想玩这个，你可以只使用 16 列中的 14 列和 center align 网格，使左右两边 space 相等。

示例：https://jsfiddle.net/batrasoe/nnpxgmaq/

<div class="ui center aligned grid">
   <div class="row">
       <div class="two wide column">ABC</div>
       <div class="two wide column">DEF</div>
       <div class="two wide column">GHI</div>
       <div class="two wide column">JKL</div>
       <div class="two wide column">MNO</div>
       <div class="four wide column">PQR</div>
       </div>
   </div>

这使用 2+2+2+2+2+4 = 14 列

使用类似 <div class="seven column row"> 的方法使列的宽度相等。这就是为什么你的 two wide column 不起作用 - 因为它通过说使列成为网格宽度的 2/16 来与等宽属性冲突。

Semantic-UI grid：跨越每行不同计数的网格中的列

Semantic-UI grid: Spanning columns in a grid with different counts per row

css

semantic-ui