Настройте сетку Bootstrap из трех столбцов

Я перебираю категории/подкатегории и помещаю их в свернутый аккордеон, где пользователь может щелкнуть имя категории, а затем подкатегории появятся ниже и будут доступны для кликов. До сих пор у меня все работало, как вы можете видеть на картинке ниже. И теперь я пытаюсь показать категории/подкатегории в сетке из трех столбцов в середине страницы.. но по какой-то причине я не могу сделать это правильно, см. рис. ниже. Любые идеи о том, как я могу реализовать это?

$('.toggle').click(function(e) {
        e.preventDefault();

        var $this = $(this);

        if ($this.next().hasClass('show')) {
            $this.next().removeClass('show');
            $this.next().slideUp(350);
        } else {
            $this.parent().parent().find('li .inner').removeClass('show');
            $this.parent().parent().find('li .inner').slideUp(350);
            $this.next().toggleClass('show');
            $this.next().slideToggle(350);
        }
    });

ul {
  list-style: none;
  padding: 0;
  text-decoration: underline;

  .inner {
    padding-left: 1em;
    //overflow: hidden;
    display: none;

    &.show {
      /*display: block;*/
    }
  }

  li {
    margin: .5em 0;

    a.toggle {
      width: 100%;
      font-weight: bold;
      display: inline-block;
      color: #3c3d3d;
      padding: 1.2em;

      &:hover {
        color: #c7c9c9;
      }
    }
  }
}

.category-select:hover {color: #c7c9c9;}
.category-select {color: #787979;}

<div class = "container-fluid">
      <div class = "row">
        <div class = "col-md-8 offset-md-1">
        <%= form_tag (search_url), :method => "get", id: "search-form" do %>
          <div class = "row">
            <div class = "col-md-4">
              <ul class = "accordion">
              <li>
              <% @categories.each do |category| %>
              <a class = "toggle" href = "javascript:void(0);" style = "text-decoration: none; text-align: center;"><%= category.name.capitalize %></a>
              <% unless category.children.empty? %>
              <ul class = "inner" style = "text-align: center;">
                <% category.children.each do |subcategory| %>           
                    <li><label class = "category-select" style = "cursor: pointer;">
                      <span style = "display: none;"><%= check_box_tag :search, subcategory.id %></span>
                      <%= subcategory.name.capitalize %>
                    </label></li>      
                <% end %>
              </ul>
            <%end%>
            <%end%>
            <%= submit_tag '', :style => "display: none;" %>
         <% end %>
           </li>
          </ul>
        </div>
        </div>
       </div>
    </div>
    </div>

Div ".col-md-4" должен быть внутри вашего цикла "category.children.each do |subcategory|"

— 20.03.2019 10:17

css ruby-on-rails bootstrap-4

20.03.2019 09:17

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваш вопрос не ясен, но есть разные способы, которые вы можете использовать, чтобы позволить циклу использовать 3 столбца. Также я не уверен, сработает ли он с вами или нет, так как я не могу правильно ответить на вопрос.

Но вы можете попробовать:

<div class = "row">  ---> Optional
  <% @some_items.in_groups_of(3) do |group| %>
    <div class = "row">
      <% group.each do |item| %>
        <div class = "col-md-4">
          <%= item.name %>
        </div>
      <% end %>
    </div>
  <% end %>
</div>   ---> Optional

Спасибо @Amir El-Bashary ;)))) я немного приспособил его к своему коду, и он отлично работает!

— 20.03.2019 10:37

20.03.2019 09:53