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>

然而，这看起来像这样：

我是否将行和列嵌套错误？或者也许是我的红宝石代码本身在新的＆＃34; Huddles＆＃34;是创造了吗？

编辑：使用固定代码，第二列＆＃34; col-md-3＆＃34;出现在最后一次创建的混乱旁边。检查一下，所有的聚会都会排成一排。

<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>

看起来像这样，第二列一直向下移动到最后一个创建的huddle：

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>