Как я могу сделать это горизонтальный список?

0

Сейчас мои пользователи отображаются вертикально. Я бы хотел, чтобы они отображались горизонтально бок о бок. Я знаю, что это очень просто сделать, но мне трудно понять, как мне хотелось бы. Заранее спасибо.

Пользователь/Index

<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;
}
  • 0
    Я думаю, что col-med-8 должен быть col-md-8
  • 0
    Можете ли вы показать нам визуализированный HTML? это явно проблема CSS, поэтому рубин не имеет значения и ограничивает количество людей, которые могут вам помочь
Показать ещё 4 комментария
Теги:
twitter-bootstrap-3
ruby-on-rails-4

3 ответа

2
Лучший ответ

Попробуйте следующее:

  1. Изолируйте пользователя из контейнеров.col-xx. Контейнеры col должны использоваться только для компоновки. Стилизация элемента.user переопределяет стили макета BS3.
  2. Удалите все определения ширины в CSS для.user. Разрешить падение ширины.
  3. Вставить вложенные столбцы с помощью.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>
Поделиться
  • 0
    Это сработало !! Огромное спасибо. Я не могу проголосовать, поэтому я проверил ответ.
  • 0
    Пожалуйста!
0

попробуй это

<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">
Поделиться
  • 0
    JsFiddle показывает их как вертикальные. Я бы хотел, чтобы они были горизонтальными. Спасибо за это! Код сдвигает все вправо, а картинки пользователей по-прежнему вертикальные. Еще раз спасибо, что нашли время, чтобы помочь мне с этим.
  • 0
    @Annette Аннетт вытяните коробку, и вы увидите, что как только она достигнет определенного размера, они получат 5 баллов. Если вам всегда нужно 5 по ширине независимо от размера экрана, вам нужно добавить col-sm-2 col-xs-2 Я обновил скрипку, чтобы показать вам
Показать ещё 2 комментария
-1

Прежде всего: прекратите использование центральной метки. Он устарел и ненадежен. Используйте CSS для ваших потребностей стиля.

Чтобы пользователи отображались по горизонтали, вам необходимо обернуть все детали пользователя (ссылки в этом случае) в каком-то элементе. Вероятно, div лучше всего. Затем вам нужно установить эти элементы для display: inline-block.

Поделиться
  • 0
    Спасибо, я избавлюсь от тегов центра. Тем не менее, я включил свой пользовательский css, но на самом деле я его не использовал.
  • 0
    @Annette Аннет, включенный CSS имеет селектор для user класса. Я не вижу нигде в вашем HTML, где есть что-то, что на самом деле имеет класс пользователя. Оберните все три пользовательские ссылки внутри цикла с помощью <div class="user">
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню