如何在聚合物项目1.0中实现容器或网格之类的东西-如何实现？

Question

我想创建一个响应性的网站与聚合物入门套件+预建的聚合物元素。

现在，如何在bootstrap这样的css框架中实现容器或网格之类的东西呢？

是否可以只使用聚合物，或者我唯一的选择是我自己的自定义代码，或者一个框架/网格系统，如骨架，波旁整洁等？

我试着看一下iron-flex-layout，但它不会像小屏幕上的网格那样相互折叠，你可以在这里看到它：

http://plnkr.co/edit/ds6gAyohtZW4ESkxu83o?p=preview

 <div class="horizontal layout" style="height:100%">
    <div class="flex-1">
      Left column
    </div>
    <div class="flex-4">
      Right column
    </div>
  </div>

它不会“折叠”，所以如果你调整窗口的大小，框就会一个接一个地在下面，它只是缩放而已。

那么，我应该如何处理它呢？

编辑:我想实现这样的目标：http://www.bootply.com/4CJ9GOYEuH

因此，如果您调整窗口大小，dics将折叠到彼此的顶部，而不是彼此紧挨着。

Answer 1

您可以组合使用iron-flex-layout和iron-media-query。Iron-media-query将根据视口大小进行更新，您可以将其媒体查询匹配绑定到其他元素。

您可以简单地执行以下操作，但同样可以使用queryMatches为您的布局生成"flex-n“类。

  <iron-media-query query="(min-width: 600px)" query-matches="{{queryMatches}}"></iron-media-query>

  <template is="dom-if" if="{{queryMatches}}">
    <div class="horizontal layout" style="height:100%">
      <div class="flex-1">
        Left column
      </div>
      <div class="flex-4">
        Right column
      </div>
    </div>
  </template>

  <template is="dom-if" if="{{!queryMatches}}">
    <div>Left column</div>
    <div>Right column</div>
  </template>

Answer 2

如果需要，可以尝试使用Iron Grid IRON-GRID并查找更多的Custome Elements。

Answer 3

您可以在web组件中添加Bootstrap的网格CSS，如下所示：

<dom-module id="bootstrap-grid">
    <template strip-whitespace>
        <style>
            /* Grid styles from Bootstrap */
        </style>
        <content></content>
    </template>
    <script>Polymer({ is: 'bootstrap-grid' });</script>
</dom-module>

Bootstrap网格样式对于SO答案来说太大了，所以here is a JSFiddle，这里是it is on GitHub。

然后在这个组件中，您可以像在<div class="container-fluid">中一样使用它

<bootstrap-grid>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-lg-4"><div class="panel">one</div></div>
        <div class="col-xs-12 col-sm-6 col-lg-4"><div class="panel">two</div></div>
        <div class="col-xs-12 col-sm-6 col-lg-4"><div class="panel">three</div></div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-4 col-lg-3"><div class="panel">A</div></div>
        <div class="col-xs-6 col-sm-4 col-lg-3"><div class="panel">B</div></div>
        <div class="col-xs-6 col-sm-4 col-lg-3"><div class="panel">C</div></div>
        <div class="col-xs-6 col-sm-4 col-lg-3"><div class="panel">D</div></div>
    </div>
</bootstrap-grid>

In the Fiddle我已经添加了--bootstrap-grid-gutter来配置间隔大小，但是由于issues with the CSS shim的原因，我不能使断点可配置。如果需要，您可以使用对其进行配置。