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

Question

我有一个语义 UI 网格，每行的列数为“奇数”：

<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”单元格跨越两个非标准大小的列（最后两个）。

使用“第二列宽”不起作用。

谁能告诉我怎么做？

Answer 1

Semantic-UI 默认使用 16 列网格。您可以通过调整theming variables 来更改此设置以用于您的网络应用程序。

如果您不想玩这个，您可以只使用 16 列中的 14 列和center align 网格，以便在左侧和右侧具有相等的空间。

示例：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。