如何使 materialize CSS 按钮的宽度与 col s12 相同？

Question

我想让“提交”按钮的长度与其上方的输入字段相同。

<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

用 div 和 col s12 类包围按钮，然后将 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%;
}

如何使 materialize CSS 按钮的宽度与 col s12 相同？

How to Make a materialize CSS button's width same as col s12?

html

css

materialize

twitter-bootstrap