Question

我想创建一个响应式网站，其中包含Polymer Starter Kit +预构建的聚合物元素。

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

是否可以只使用Polymer，或者我唯一的选择是我自己的自定义代码，还是框架/网格系统，如骨架，波旁威士忌等？

我试着看一下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>

它没有＆＃34;崩溃＆＃34;所以如果你调整窗口的大小，它们会在彼此之下，只是缩放。

那么，我该怎么做呢？

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

因此，如果您调整窗口大小，则dics将会折叠到彼此的顶部，而不是彼此相邻。

Answer 1

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

天真地，您可以执行以下操作，但同样可以使用queryMatches生成＆＃34; flex-n＆＃34;您的布局的类。

  <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，我无法使断点可配置。如果需要，您可以使用<iron-media-query>进行配置。

如何在Polymer Project 1.0中实现容器或网格之类的东西 - 如何实现？

3 个答案: