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> 

此，自带出去找这样的：

上午我筑巢我的行和列错了吗？或者，也许这是我的红宝石代码本身，一旦新的“Huddles”创建了螺旋布局？

编辑：使用固定的代码，第二列“col-md-3”出现在最后一次创建的混杂区旁边。检查它，所有的挤压成一排。

<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结构有关，与ruby无关。

我也想澄清一下。你遇到的最初问题是你在循环中启动了一个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>