6

我想使用 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>

它不会“折叠”，因此如果您调整窗口大小，这些框将在彼此下方，它只是缩放。

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

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

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

4

3 回答 3

1

您可以将iron-flex-layoutandiron-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>
于 2015-09-03T04:49:39.270 回答
0

尝试 Iron Grid IRON-GRID并 在需要时查找更多自定义元素。

于 2015-09-02T18:33:33.520 回答
0

您可以在 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 答案来说太大了，所以这里有一个 JSFiddle，它在 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>

在小提琴中，我添加了用于配置装订线大小，但由于CSS shim--bootstrap-grid-gutter的问题，我无法使断点可配置。如果需要，您可以使用它进行配置。<iron-media-query>

于 2017-01-11T10:16:16.660 回答