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

尝试以下方法：

从.col-x-x容器中隔离.user。 col容器应仅用于布局。样式化.user元素将覆盖BS3布局样式。
删除CSS中任何宽度定义.user。允许宽度下降。
使用.row

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

EX：

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

Answer 2

试试这个

<div class="col-md-offset-4 col-md-8 col-lg-8 col-lg-offset-4">

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

用这个css

.user{
     margin:0.2%;
     display:block;
}

这将为您提供5个大中型和大型屏幕以及小型和超小屏幕上的垂直堆叠。快速jsFiddle给你。

此处你还有未关闭的div标签：

<div class="panel panel-default">
<div class="panel-heading center">

Answer 3

首先要做的事情：停止使用中心标签。它被弃用且不可靠。使用CSS满足您的样式需求。

要让您的用户水平显示，您需要在某种元素中包装所有用户详细信息（在本例中为链接）。 div可能是最好的。然后，您需要将这些元素设置为display: inline-block。

如何将其设为水平列表？

3 个答案: