我正在使用带有rails的Semantic UI并尝试将4个项目分布在一行中,而是将它们垂直堆叠在一起。
<div class="ui four column grid">
<div class="row">
<% @posts.each do |post| %>
<div class="column">
<div class="ui card">
<div class="image"><%= link_to (image_tag avatar.post, post_path(post), class: "ui tiny circular centered image" %>
</div>
<div class="content">
<a class="header"><%= post.instagram_username %></a>
<div class="extra content">
<p><small><%= raw post.tags.map(&:name).map { |t| link_to t, tag_path(t),class: "ui primary basic mini button" }.join %></small</p></div>
</div>
</div>
<% end %>
</div>
</div>
使用这样:
<div class="ui grid">
<div class="row">
<% @posts.each do |post| %>
<div class="four wide column">
<div class="column">
<div class="ui card">
<div class="image"><%= link_to (image_tag avatar.post, post_path(post), class: "ui tiny circular centered image" %>
</div>
<div class="content">
<a class="header"><%= post.instagram_username %></a>
<div class="extra content">
<p><small><%= raw post.tags.map(&:name).map { |t| link_to t, tag_path(t),class: "ui primary basic mini button" }.join %></small</p></div>
</div>
</div>
</div>
<% end %>
</div>
在这里您可以找到更多detail
要么
只是为了确保使用它,应该是水平的。
<div class="ui grid">
<div class="four wide column"></div>
<div class="four wide column"></div>
<div class="four wide column"></div>
<div class="four wide column"></div>
</div>