我需要将ui-segment分为3列,并显示等分的ui- statistic。以下是我要实现的代码,
<div class="ui container">
<div class="ui segment">
<h3 class="ui header">World</h3>
<div class="ui grid stackable">
<div class="three column row">
<div class="column">
<div class=" ui statistic red statistic">
<div class="value">
16%
</div>
<div class="label">
A
</div>
</div>
</div>
<div class="column">
<div class=" ui statistic yellow statistic">
<div class="value">
53%
</div>
<div class="label">
B
</div>
</div>
</div>
<div class="column">
<div class=" ui statistic green statistic">
<div class="value">
31%
</div>
<div class="label">
C
</div>
</div>
</div>
</div>
</div>
</div>
</div>
但是,这看起来很糟糕。移动设备的外观也与列不在ui段中的外观相同。
我怎样才能解决这个问题?
提前致谢。
最佳答案
我不确定语义UI可堆叠网格和统计信息之间的交互。
这可能是一个选项,但是您可以尝试ui统计信息分组。
<div class="ui three statistics">
<div class=" ui statistic red statistic">
<div class="value">16%</div>
<div class="label">A</div>
</div>
<div class=" ui statistic yellow statistic">
<div class="value">53%</div>
<div class="label">B</div>
</div>
...
...
我在这里做了一个样本:
http://jsfiddle.net/4a32bbmu/