引导选项卡窗格的 Rails Masonry GEM 问题答案

【问题标题】：Rails Masonry GEM issues with Bootstrap Tab-pane引导选项卡窗格的 Rails Masonry GEM 问题
【发布时间】：2014-06-08 05:51:24
【问题描述】：

我在我的 rails 应用程序中使用引导选项卡窗格。在每个选项卡中，我想使用 Masonry GEM。但是，所有的项目都堆叠在一起。

.container
  %ul.nav.nav-tabs
    - if @project.user == current_user
      %li
        %a{href: new_project_room_path(@project)} <i class='fa fa-plus-circle'></i> Add Room
    - @rooms.each do |room|
      %li
        %a{"data-toggle" => "tab", href: "##{dom_id(room)}"}= room.title


  .tab-content

    - @rooms.each do |room|
      .tab-pane{id: dom_id(room)}
        .container-fluid.page.page-block
          .masonry-container.centered.transitions-enabled.infinite-scroll.clearfix
            - room.products.each do |product|
              .box.col3
                = product.title

如果我调整页面大小，它们会以我希望的方式并排显示。我怎样才能让它一直这样显示？

另外作为一个仅供参考，当我使用不在选项卡窗格内的类似代码时，一切正常。

.container-fluid.page.page-block
  .masonry-container.centered.transitions-enabled.infinite-scroll.clearfix
    - if current_user.is_designer?
      = link_to new_project_path do
        .box.col3.create_projects_well#add_project
          %span.text-center#create_project
            %i.fa.fa-plus-circle.fa-3x
            %br
            Add a project

    - @projects.each do |project|
      .box.col3
        - if project.image_url != nil
          = link_to(image_tag(project.image_url, class: "img-responsive opaq"), user_project_path(project.user, project))
        - else
          = link_to(image_tag("150.png", class: "img-responsive opaq"), user_project_path(project.user, project))

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap haml masonry

【解决方案1】：

尝试去除液体。

.container.page.page-block
  .masonry-container.centered.transitions-enabled.infinite-scroll.clearfix
    - if current_user.is_designer?
      = link_to new_project_path do
        .box.col3.create_projects_well#add_project
          %span.text-center#create_project
            %i.fa.fa-plus-circle.fa-3x
            %br
            Add a project

根据bootstrap fluid grid documentation，“使用流体网格嵌套有点不同：嵌套列的数量不需要与父级匹配。相反，您的列在每个级别都会重置，因为每一行需要上升到父列的 100%。"

【讨论】：

Drew，你是对的，删除 -fluid 并仅使用 .container 解决了问题。谢谢！

【解决方案2】：

不确定我是否理解正确。但是，如果您想让砌体始终保持相同的宽度，您可能需要检查 isFitWidth 属性

链接到砌体文档 http://masonry.desandro.com/options.html#isfitwidth

"isFitWidth": true

/* center container with CSS */
#fit-width .masonry {
  margin: 0 auto;
}

codepen 演示 http://codepen.io/desandro/pen/nGLvx

【讨论】：