如何使一个物化CSS按钮的宽度与col s12相同？

Question

我想让Submit按钮的长度与它上面的输入字段相同.

<div class="row">
     <div class="input-field col s12">
        <input id="speciality" type="text" class="validate">
            <label for="speciality">Speciality</label>
     </div>
</div>
<div class="row">
    <button class="btn waves-effect waves-light" type="submit" name="action">Search
        <i class="material-icons right">search</i>
    </button>
</div>

Answer 1

如果您输入字段的列限制为某个宽度(与Bootstrap列的工作方式相同),您也可以将.btn列放在列中.

之后,您可以使用以下CSS使宽度等于输入字段:

.col.s12 > .btn {
   width: 100%;
}

当然,如果button作为一个元素不弯曲到这个CSS规则,你可以<a class="btn">改为使用.

Answer 2

用带有col s12类的 div 包围按钮并添加btn-block到按钮：

<div class="row">
    <div class="col s12">
        <button class="btn btn-block waves-effect waves-light" type="submit" name="action">Search
            <i class="material-icons">search</i>
        </button>
    </div>
</div>

并添加以下 CSS：

.btn-block {
    width: 100%;
}