Google MDL网格无效

时间：2016-05-11 09:30:21

标签： html material-design haml

我正在尝试使用.mdl-cell.mdl-cell - 4-col来打破我网站的元素，但它似乎只是堆叠

enter image description here 

<main class="mdl-layout__content">
    <div class="page-content">
      <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--12-col">
          <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" data-association="variants" href="javascript:void(0);" data-upgraded=",MaterialButton,MaterialRipple">New Variant<span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></a>
          <input type="submit" name="commit" value="Update" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="update_product_button" data-upgraded=",MaterialButton,MaterialRipple"></input>
          <a class="mdl-button mdl-js-button mdl-js-ripple-effect" href="/admin/merchandise/products/cappuccino" data-upgraded=",MaterialButton,MaterialRipple">Back to Product<span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></a>
          <form class="" id="edit_product_2" action="/admin/merchandise/multi/products/cappuccino/variant" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="patch"><input type="hidden" name="authenticity_token" value="pY8yLwjZiMRAL3JIuvmuT0DW7QLrAsLSsZ/7d3mW//6Uz8LHHu0AqNuMUUveviA3T542DAOWip6QN5ug08Q78w==">  <div class="mdl-cell mdl-cell--4-col">
              <div class="mdl-card mdl-shadow--4dp">
                <div class="mdl-card__media">
                  <img alt="" border="0" height="157" src="skytower.jpg" style="padding:10px;" width="173">
                </div>
                <div class="mdl-card__supporting-text">
                  <div class="mdl-textfield mdl-js-textfield is-upgraded" data-upgraded=",MaterialTextfield">
                    <input class="mdl-textfield__input" type="text" name="product[variants_attributes][new_variants][sku]" id="product_variants_attributes_new_variants_sku">
                    <label class="mdl-textfield__label" for="product_variants_attributes_new_variants_sku">Sku</label>
                  </div>
                  <div class="mdl-textfield mdl-js-textfield is-dirty is-upgraded" data-upgraded=",MaterialTextfield">
                    <input class="mdl-textfield__input" type="number" value="0.0" name="product[variants_attributes][new_variants][price]" id="product_variants_attributes_new_variants_price">
                    <label class="mdl-textfield__label" for="product_variants_attributes_new_variants_price">Price</label>
                  </div>
                  <div class="mdl-textfield mdl-js-textfield is-dirty is-upgraded" data-upgraded=",MaterialTextfield">
                    <input class="mdl-textfield__input" type="number" value="0.0" name="product[variants_attributes][new_variants][cost]" id="product_variants_attributes_new_variants_cost">
                    <label class="mdl-textfield__label" for="product_variants_attributes_new_variants_cost">Cost</label>
                  </div>
                </div>
                <div id="variants_fields_template" style="display:block;">
                  <div class="span-6 three large-3 columns new_variant_container" style="float: left;">
                    <table class="span-6 ar-sidebar" style="width:240px;">
                      <tbody><tr>
                        <td></td>
                        <td style="float:right;">
                          <a class="remove_variant_child" href="#remove">remove</a>
                        </td>
                      </tr>
                      <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                      </tr>
                      <tr>
                        </tr><tr style="background:#ACF;text-align:center;">
                          <th colspan="2">
                            Size
                          </th>
                        </tr>
                        <tr>
                          <td>
                            Primary? <input name="product[variants_attributes][new_variants][variant_properties_attributes][0][primary]" type="hidden" value="0"><input type="checkbox" value="1" name="product[variants_attributes][new_variants][variant_properties_attributes][0][primary]" id="product_variants_attributes_new_variants_variant_properties_attributes_0_primary">
                          </td>
                          <td>
                            <input type="hidden" value="1" name="product[variants_attributes][new_variants][variant_properties_attributes][0][property_id]" id="product_variants_attributes_new_variants_variant_properties_attributes_0_property_id">
                            <input class="span-3" type="text" name="product[variants_attributes][new_variants][variant_properties_attributes][0][description]" id="product_variants_attributes_new_variants_variant_properties_attributes_0_description">
                          </td>
                        </tr>
                        <tr style="background:#ACF;text-align:center;">
                          <th colspan="2">
                            Milk
                          </th>
                        </tr>
                        <tr>
                          <td>
                            Primary? <input name="product[variants_attributes][new_variants][variant_properties_attributes][1][primary]" type="hidden" value="0"><input type="checkbox" value="1" name="product[variants_attributes][new_variants][variant_properties_attributes][1][primary]" id="product_variants_attributes_new_variants_variant_properties_attributes_1_primary">
                          </td>
                          <td>
                            <input type="hidden" value="2" name="product[variants_attributes][new_variants][variant_properties_attributes][1][property_id]" id="product_variants_attributes_new_variants_variant_properties_attributes_1_property_id">
                            <input class="span-3" type="text" name="product[variants_attributes][new_variants][variant_properties_attributes][1][description]" id="product_variants_attributes_new_variants_variant_properties_attributes_1_description">
                          </td>
                        </tr>

                    </tbody></table>
                  </div>
                </div>
              </div>
            </div>
            <div class="mdl-cell mdl-cell--4-col">
              <div class="mdl-card mdl-shadow--4dp">
                <div class="mdl-card__media">
                  <img alt="" border="0" height="157" src="skytower.jpg" style="padding:10px;" width="173">
                </div>
                <div class="mdl-card__supporting-text">
                  <div class="mdl-textfield mdl-js-textfield is-dirty is-upgraded" data-upgraded=",MaterialTextfield">
                    <input class="mdl-textfield__input" type="text" value="12335" name="product[variants_attributes][0][sku]" id="product_variants_attributes_0_sku">
                    <label class="mdl-textfield__label" for="product_variants_attributes_0_sku">Sku</label>
                  </div>
                  <div class="mdl-textfield mdl-js-textfield is-dirty is-upgraded" data-upgraded=",MaterialTextfield">
                    <input class="mdl-textfield__input" type="number" value="29.0" name="product[variants_attributes][0][price]" id="product_variants_attributes_0_price">
                    <label class="mdl-textfield__label" for="product_variants_attributes_0_price">Price</label>
                  </div>
                  <div class="mdl-textfield mdl-js-textfield is-dirty is-upgraded" data-upgraded=",MaterialTextfield">
                    <input class="mdl-textfield__input" type="number" value="0.0" name="product[variants_attributes][0][cost]" id="product_variants_attributes_0_cost">
                    <label class="mdl-textfield__label" for="product_variants_attributes_0_cost">Cost</label>
                  </div>
                </div>
                <table class="span-6 ar-sidebar" style="width:240px;">
                  <tbody><tr>
                    <td>Inactivate</td>
                    <td>
                      <input name="product[variants_attributes][0][inactivate]" type="hidden" value="0"><input class="span-3" type="checkbox" value="1" name="product[variants_attributes][0][inactivate]" id="product_variants_attributes_0_inactivate">
                    </td>
                  </tr>
                  <tr style="background:#ACF;text-align:center;">
                    <th colspan="2">
                      Size
                    </th>
                  </tr>
                  <tr>
                    <td>
                      Primary? <input name="product[variants_attributes][0][variant_properties_attributes][0][primary]" type="hidden" value="0"><input type="checkbox" value="1" checked="checked" name="product[variants_attributes][0][variant_properties_attributes][0][primary]" id="product_variants_attributes_0_variant_properties_attributes_0_primary">
                    </td>
                    <td>
                      <input type="hidden" value="1" name="product[variants_attributes][0][variant_properties_attributes][0][property_id]" id="product_variants_attributes_0_variant_properties_attributes_0_property_id">
                      <input class="span-3" type="text" value="Pico" name="product[variants_attributes][0][variant_properties_attributes][0][description]" id="product_variants_attributes_0_variant_properties_attributes_0_description">
                      <div class="mdl-accordion"></div>
                    </td>
                  </tr>
                  <input type="hidden" value="38" name="product[variants_attributes][0][variant_properties_attributes][0][id]" id="product_variants_attributes_0_variant_properties_attributes_0_id">
                  <tr style="background:#ACF;text-align:center;">
                    <th colspan="2">
                      Milk
                    </th>
                  </tr>
                  <tr>
                    <td>
                      Primary? <input name="product[variants_attributes][0][variant_properties_attributes][1][primary]" type="hidden" value="0"><input type="checkbox" value="1" name="product[variants_attributes][0][variant_properties_attributes][1][primary]" id="product_variants_attributes_0_variant_properties_attributes_1_primary">
                    </td>
                    <td>
                      <input type="hidden" value="2" name="product[variants_attributes][0][variant_properties_attributes][1][property_id]" id="product_variants_attributes_0_variant_properties_attributes_1_property_id">
                      <input class="span-3" type="text" value="Milk" name="product[variants_attributes][0][variant_properties_attributes][1][description]" id="product_variants_attributes_0_variant_properties_attributes_1_description">
                      <div class="mdl-accordion"></div>
                    </td>
                  </tr>
                  <input type="hidden" value="39" name="product[variants_attributes][0][variant_properties_attributes][1][id]" id="product_variants_attributes_0_variant_properties_attributes_1_id">
                </tbody></table>
              </div>
            </div>
            <input type="hidden" value="4" name="product[variants_attributes][0][id]" id="product_variants_attributes_0_id">
            <div class="mdl-cell mdl-cell--4-col">
              <div class="mdl-card mdl-shadow--4dp">
                <div class="mdl-card__media">
                  <img alt="" border="0" height="157" src="skytower.jpg" style="padding:10px;" width="173">
                </div>
                <div class="mdl-card__supporting-text">
                  <div class="mdl-textfield mdl-js-textfield is-dirty is-upgraded" data-upgraded=",MaterialTextfield">
                    <input class="mdl-textfield__input" type="text" value="124" name="product[variants_attributes][1][sku]" id="product_variants_attributes_1_sku">
                    <label class="mdl-textfield__label" for="product_variants_attributes_1_sku">Sku</label>
                  </div>
                  <div class="mdl-textfield mdl-js-textfield is-dirty is-upgraded" data-upgraded=",MaterialTextfield">
                    <input class="mdl-textfield__input" type="number" value="19.0" name="product[variants_attributes][1][price]" id="product_variants_attributes_1_price">
                    <label class="mdl-textfield__label" for="product_variants_attributes_1_price">Price</label>
                  </div>
                  <div class="mdl-textfield mdl-js-textfield is-dirty is-upgraded" data-upgraded=",MaterialTextfield">
                    <input class="mdl-textfield__input" type="number" value="0.0" name="product[variants_attributes][1][cost]" id="product_variants_attributes_1_cost">
                    <label class="mdl-textfield__label" for="product_variants_attributes_1_cost">Cost</label>
                  </div>
                </div>
                <table class="span-6 ar-sidebar" style="width:240px;">
                  <tbody><tr>
                    <td>Inactivate</td>
                    <td>
                      <input name="product[variants_attributes][1][inactivate]" type="hidden" value="0"><input class="span-3" type="checkbox" value="1" name="product[variants_attributes][1][inactivate]" id="product_variants_attributes_1_inactivate">
                    </td>
                  </tr>
                  <tr style="background:#ACF;text-align:center;">
                    <th colspan="2">
                      Size
                    </th>
                  </tr>
                  <tr>
                    <td>
                      Primary? <input name="product[variants_attributes][1][variant_properties_attributes][0][primary]" type="hidden" value="0"><input type="checkbox" value="1" checked="checked" name="product[variants_attributes][1][variant_properties_attributes][0][primary]" id="product_variants_attributes_1_variant_properties_attributes_0_primary">
                    </td>
                    <td>
                      <input type="hidden" value="1" name="product[variants_attributes][1][variant_properties_attributes][0][property_id]" id="product_variants_attributes_1_variant_properties_attributes_0_property_id">
                      <input class="span-3" type="text" value="Small" name="product[variants_attributes][1][variant_properties_attributes][0][description]" id="product_variants_attributes_1_variant_properties_attributes_0_description">
                      <div class="mdl-accordion"></div>
                    </td>
                  </tr>
                  <input type="hidden" value="36" name="product[variants_attributes][1][variant_properties_attributes][0][id]" id="product_variants_attributes_1_variant_properties_attributes_0_id">
                  <tr style="background:#ACF;text-align:center;">
                    <th colspan="2">
                      Milk
                    </th>
                  </tr>
                  <tr>
                    <td>
                      Primary? <input name="product[variants_attributes][1][variant_properties_attributes][1][primary]" type="hidden" value="0"><input type="checkbox" value="1" checked="checked" name="product[variants_attributes][1][variant_properties_attributes][1][primary]" id="product_variants_attributes_1_variant_properties_attributes_1_primary">
                    </td>
                    <td>
                      <input type="hidden" value="2" name="product[variants_attributes][1][variant_properties_attributes][1][property_id]" id="product_variants_attributes_1_variant_properties_attributes_1_property_id">
                      <input class="span-3" type="text" value="Cream" name="product[variants_attributes][1][variant_properties_attributes][1][description]" id="product_variants_attributes_1_variant_properties_attributes_1_description">
                      <div class="mdl-accordion"></div>
                    </td>
                  </tr>
                  <input type="hidden" value="37" name="product[variants_attributes][1][variant_properties_attributes][1][id]" id="product_variants_attributes_1_variant_properties_attributes_1_id">
                </tbody></table>
              </div>
            </div>
            <input type="hidden" value="3" name="product[variants_attributes][1][id]" id="product_variants_attributes_1_id">
          </form>
        </div>
      </div>
    </div>
  </main>

1 个答案:

答案 0 :(得分：0)

从那以后，

已经将这些类用于不同的设备，似乎解决了上述问题

相关问题
最新问题