我有一个语义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”单元格跨越两个非标准大小的列(最后两个)。
使用“第二列”不起作用。
谁能告诉我怎么做?
答案 0 :(得分:2)
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列。