Polymer.jsが水平方向に鉄の形の要素を整列する

Question

鉄のフォームを使用してPolymer 2.0を使用してフォームを作成しようとしています。私は1つの行に2つのフォーム要素を整列させ、次の行に次の2つの要素を配置するなどします。 しかし、これを達成するために何を使うべきかわかりません。

下記のコードをご覧ください。

<div class="card"> 
      <iron-form id="form3"> 
       <form action="" method="get"> 
        <paper-input float-label label="First Name"></paper-input> 
        <paper-input float-label label="Last Name"></paper-input> 
        <paper-input float-label label="Address"></paper-input> 
        <paper-input float-label label="State"></paper-input> 
        <paper-input float-label label="Country"></paper-input> 
        <paper-input float-label label="PIN"></paper-input> 
        <paper-input float-label label="Phone (Mobile)"></paper-input> 
        <paper-input float-label label="Phone (Office)"></paper-input> 
        <paper-button raised class="indigo">Submit</paper-button> 
       </form> 
      </iron-form> 
     </div> 

大変助けになりました。

Answer 1

ラップ<paper-item></paper-item>各<paper-input></paper-input><paper-input></paper-input><paper-input></paper-input>同じ行で使用するのが好きで、スペースを確保するためのパディングも追加します。すなわち：

<style> 
    paper-input {padding-left:10px } 
</style> 

<div class="card"> 
      <iron-form id="form3"> 
       <form action="" method="get"> 
        <paper-item> 
         <paper-input float-label label="First Name"></paper-input> 
         <paper-input float-label label="Last Name"></paper-input> 
        </paper-item> 
        <paper-item> 
         <paper-input float-label label="Address"></paper-input> 
         <paper-input float-label label="State"></paper-input> 
        </paper-item> 
        <paper-item> 
         <paper-input float-label label="Country"></paper-input> 
         <paper-input float-label label="PIN"></paper-input> 
        <paper-input float-label label="Phone (Mobile)"></paper-input> 
        </paper-item> 
         <paper-input float-label label="Phone (Office)"></paper-input> 
         <paper-button raised class="indigo">Submit</paper-button> 
       </form> 
      </iron-form> 
</div> 

Answer 2

Wrap two paper input elements into div and apply style as shown below. 

<style> 
     div{ 
     @apply --layout-horizontal; 
     @apply --layout-flex; 
    } 
    </style> 

    <div> 
    <paper-input float-label label="First Name"></paper-input> 
    <paper-input float-label label="Last Name"></paper-input> 
    <div> 

Answer 3

は、すべての応答をありがとうございました。ついに、花崗岩のブートストラップグリッドを花崗岩のブートストラップコンポーネントから使用することに決めました。

私はブートストラップに非常に慣れているので、同じブートストラップクラスを使用してポリマーアプリケーション内で応答性を得ることができました。

下記のリンクをご覧ください。

https://www.webcomponents.org/element/LostInBrittany/granite-bootstrap