Bootstrap не работает должным образом в моем приложении Rails

Question

Я пытаюсь создать макет из двух столбцов. Первая сторона должна охватывать 9 столбцов и следующий 3. Внутри COL-MD-9 Я хочу, чтобы гнездиться еще две колонны, одна из которых охватывает 4 и еще один, который охватывает 8.

<div class="row"> 
    <% @huddles.each do |huddle| %> 
    <div class="col-md-9"> 
    <div class="row"> 
     <div class="col-md-4"> 
     <img class="img-responsive" src="http://placehold.it/300x150"> 
     </div> 
     <div class="col-md-8"> 
     <h4><%= huddle.title %></h4> 
     <h4 class="huddle-description"><%= huddle.description %></h4> 
     <%= link_to "Read More...", huddle_path(huddle) %> 
     </div> 
    </div> 
    <% end %> 
</div> 
<div class="col-md-3">Second Column</div> 
</div> 

Это, однако, приходит из вида:

Am I вложенности мои строки и столбцы так? Или, может быть, это мой код ruby, который закручивает макет, когда создаются новые «Huddles»?

EDIT: с фиксированным кодом второй столбец «col-md-3» выходит рядом с последним созданным сближением. Проверяя это, все huddles делают один ряд.

<div class="row"> 
<% @huddles.each do |huddle| %> 
    <div class="col-md-9"> 
    <div class="row"> 
    <div class="col-md-4"> 
    <img class="img-responsive" src="http://placehold.it/300x150"> 
    </div> 
    <div class="col-md-8"> 
    <h4><%= huddle.title %></h4> 
    <h4 class="huddle-description"><%= huddle.description %></h4> 
    <%= link_to "Read More...", huddle_path(huddle) %> 
    </div> 
    </div> 
</div> 
<% end %> 
<div class="col-md-3">Second Column</div> 
</div> 

И выглядит это, где вторая колонна движется весь путь вниз рядом с последней кучки созданный:

Answer 1

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

Я также хочу уточнить. Первоначальная проблема, с которой вы столкнулись, заключалась в том, что вы запускали div внутри цикла, но только закрывали его вне цикла. Таким образом, начиная n количество div, но только один закрывающий тег, и это приведет к тому, что он будет выглядеть как изображение, которое вы впервые разместили.

<div class="row"> 
    <div class="col-md-9"> 
    <% @huddles.each do |huddle| %> 
    <div class="show-region" > 
     <div class="col-md-4" style="height:150px;"> 
     <img class="img-responsive" src="http://placehold.it/300x150"> 
     </div> 
     <div class="col-md-8" style="height:150px;"> 
     <h4><%= huddle.title %></h4> 
     <h4 class="huddle-description"><%= huddle.description %></h4> 
     <%= link_to "Read More...", subjects_path(huddle) %> 
     </div> 
    </div> 
    <% end %> 
    </div> 
    <div class="col-md-3">Second Column</div> 
</div>