すべてのフォーム入力が、私は、最新のmaterializecssを使用している、と私は、次のHTML持っているカード

Question

にフィットわけではありません：

<div class="container"> 

    <div class="section"> 

     <!-- Main content --> 
     <div class="row"> 
      <div class="col s12 m12 l12"> 

       <div class="row"> 

     <div class="card col s12 m12 l6 offset-l3"> 
      <div class="card-content"> 
       <div class="row"> 
        <form class="col s12 m12 l12" method="post" action=""> 

         <!-- Name --> 
         <div class="row"> 
          <div class="input-field col s12"> 
           <i class="material-icons prefix">library_add</i> 
           <input id="name" type="text" 
             name="name" 
             required> 
           <label for="name">Campaign name</label> 
          </div> 
         </div> 

         <!-- Type --> 
         <div class="row"> 
          <div class="input-field col s12"> 
           <select id="type" name="type"> 
            <option value="cpm">CPM</option> 
            <option value="cpc">CPC</option> 
            <option value="cpi" disabled>CPI</option> 
           </select> 
           <label for="type">Campaign type</label> 
          </div> 
         </div> 

        </form> 
       </div> 
      </div> 
     </div> 

    </div> 
      </div> 
     </div> 
    </div> 

</div> 

をそして、結果は以下の通りです：

Selectではありませんまったく表示され、私はselect行の後

<div class="row"> 
    <button type="submit" class="waves-effect waves-light deep-orange darken-4 btn">Create</button> 
</div> 

を追加する場合、それが選択重なります：

なぜ、どのように修正するのですか？

Answer 1

選択したコンポーネントが初期化されていることを確認してください。

$(document).ready(function() { 
    $('select').material_select(); 
}); 

参考：再現することは容易であるようにMaterializecss documentation on select-initialization