Как сделать так, чтобы ширина кнопки 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%;
}