语义UI项堆叠而不是分散在行中

Question

我正在将语义UI与rails一起使用，并试图将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>

Answer 1

像这样使用：

<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

OR

只需确保使用此选项，它应该是水平的。

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