語義UI - 在移動設備，平板電腦和計算機上具有可變列數的網格

我有用戶圖像，根據網格中的列數調整它們的大小。語義UI - 在移動設備，平板電腦和計算機上具有可變列數的網格

現在我有：

<div class="ui ten column grid"> 
    {% for user in event.participants.all %} 
    <div class="center aligned column"> 
    <a href="{% url 'profiles:profile' user.username %}"><img class="ui circular small centered image" src="{{ user.profile.get_avatar_url }}"></a> 
    <p>{{ user.username }}</p> 
    </div> 
    {% endfor %} 
</div>

，一切工作正常，除了在其上應用的移動設備以及用於計算機，因爲「十柱網」的小型設備配置文件的圖像尺寸急劇降低，。

我知道，裏面的網格列，可以聲明：

<div class="sixteen wide mobile twelve wide tablet ten wide computer column">

，但如果我使用它的網格本身它不會工作：

<div class="ui sixteen wide mobile twelve wide tablet ten wide computer column grid">

如何建立網格在手機，平板電腦和計算機上的列數會有所不同？

來源

2017-03-06 Alexander Tyapkov

列大小必須在每個.column上聲明。不在電網上。

此外，您還需要.stackable類來包裝您的列。

看到這個的jsfiddle：http://jsfiddle.net/vfpv0jzd/2/

來源

2017-03-06 16:46:57 NoSoyTsundere

謝謝你的答案。不幸的是，這個解決方案並不適合我，因爲如果要使網格可堆疊，配置文件圖像將佔用一行，另一個圖像將位於下一行，依此類推。我想要在移動設備上以一行顯示七張照片 –

語義UI - 在移動設備，平板電腦和計算機上具有可變列數的網格

回答

相關問題