Семантические элементы пользовательского интерфейса складываются, а не распределяются по ряду - PullRequest
Новая
       2

Семантические элементы пользовательского интерфейса складываются, а не распределяются по ряду

0 голосов
/ 08 марта 2019

Я использую Semantic UI с рельсами и пытаюсь распределить 4 элемента по ряду, но вместо этого они располагаются вертикально друг над другом.

enter image description here 

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

1 Ответ

1 голос
/ 08 марта 2019

Используйте вот так: 

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

Здесь вы можете найти больше подробно

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