css - 我怎样才能使它成为一个水平列表？

Question

现在我的用户正在垂直显示。我希望它们并排水平显示。我知道这是一件非常简单的事情，但是我很难让它成为我想要的样子。先感谢您。

用户/索引

<div class="page-header">
<center><strong><h1> All Users </h1></strong></center>
</div>

  <% @users.each do |user| %>
  <div class="user horizontal-align col-md-2">
     <%= link_to image_tag(user.avatar.url(:thumb)), user %>
      <br><%= link_to user.name, user %></br>
        <% if current_user.admin %>
     <%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>

        <% end %>
    <% end %>
 </div>

<div class="center">
<%= will_paginate @users, renderer: BootstrapPagination::Rails %>
</div>

用户 CSS

.user {
    width: 200px;
    display: inline-block;
}

Answer 1

尝试以下操作:

1. 将 .user 从 .col-x-x 容器中分离出来。 col 容器应该只用于布局。为 .user 元素设置样式会覆盖 BS3 布局样式。
2. 删除 .user 的 CSS 中的所有宽度定义。允许宽度下降。
3. 用 .row 包裹嵌套的列

jsFiddle:http://jsfiddle.net/zktfu52t/2/

例如:

<div class="col-md-offset-4 col-md-8 col-lg-8 col-lg-offset-4">
    <div class="row">
        <% @users.each do |user| %>
        <div class="horizontal-align col-md-2">
            <div class="user">
                <%= link_to image_tag(user.avatar.url(:thumb)), user %>
                <br><%= link_to user.name, user %></br>
                <% if current_user.admin %>
                <%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>
                <% end %>
            </div>
        </div>
        <% end %>
    </div>
</div>