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

Question

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

$('.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>

Answer 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