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列。

Semantic-UI网格：在网格中跨越列，每行具有不同的计数

1 个答案: