【问题标题】:Nesting Bootstrap grids in rails在 Rails 中嵌套 Bootstrap 网格
【发布时间】:2015-03-04 06:28:44
【问题描述】:

大家好,我想知道在 Rails 中嵌套引导网格的正确方法是什么。

目前在我的索引视图中,我有类似的东西

<% @users.each do |user| %>
<div class="row">
  render @user
</div>
<% end %>

我的用户部分是这样的

   <div class="col-md-3">
    user.title
    </div>

如果有 9 个用户,则 html 会演变为类似

<div class="row">
     <div class="col-md-3">
      title1 
     </div>
     <div class="col-md-3">
      title2 
     </div>
     <div class="col-md-3">
      title3 
     </div>
     <div class="col-md-3">
      title4 
     </div>
     <div class="col-md-3">
      title5 
     </div>
     <div class="col-md-3">
      title6 
     </div>
     <div class="col-md-3">
      title7 
     </div>
     <div class="col-md-3">
      title8 
     </div>
     <div class="col-md-3">
      title9
     </div>
</div>

但是我希望它评估为这样的东西

<div class="row">
     <div class="col-md-3">
      title1 
     </div>
     <div class="col-md-3">
      title2 
     </div>
     <div class="col-md-3">
      title3 
     </div>
     <div class="col-md-3">
      title4 
     </div>
</div>
<div class="row"
     <div class="col-md-3">
      title5 
     </div>
     <div class="col-md-3">
      title6 
     </div>
     <div class="col-md-3">
      title7 
     </div>
     <div class="col-md-3">
      title8 
     </div>
</div>
<div class="row"
     <div class="col-md-3">
      title9 
     </div>
</div>

我该怎么做呢?

【问题讨论】:

    标签: html ruby-on-rails-4 twitter-bootstrap-3


    【解决方案1】:

    使用 in_groups_of 方法:http://apidock.com/rails/Array/in_groups_of

    <% @users.in_groups_of(4, false) do |users| %>
      <div class="row">
        <% users.each do |user| %>
           <%= render @user %>
        <% end %>
      </div>
    <% end %>
    

    【讨论】:

    • 不知道 in_groups_of 。但这太棒了!
    【解决方案2】:

    jverban 给出的答案是

    <% @users.in_groups_of(4, false) do |users| %>
      <div class="row">
        <% users.each do |user| %>
           <%= render @user %>
        <% end %>
      </div>
    <% end %>
    

    【讨论】:

      猜你喜欢
      • 2018-11-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-05-31
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多