并非所有表单输入都适合卡

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根本没有显示，如果我添加

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

在select行之后，它将与选择重叠：

为什么以及如何解决它？

Answer 1

确保初始化选择组件。

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

参考：Materializecss documentation on select-initialization