1

我在我的 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))
4

2 回答 2

0

不确定我是否理解正确。但是，如果您想让砖石始终保持相同的宽度，您可能需要检查 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

于 2014-06-08T20:47:29.183 回答
0

尝试去除液体。

.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

根据引导流体网格文档，“使用流体网格嵌套有点不同：嵌套列的数量不需要与父级匹配。相反，您的列在每个级别都会重置，因为每行占用 100%父列。 ”

于 2014-06-08T20:51:36.183 回答