並非所有的表單輸入被裝配到卡

Question

我使用的是最新的materializecss，和我有以下HTML：

<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