Как я могу добавить больше половины столбца в HTML, например, 0,5, 1,5, 2,5

Question

Я создал форму входа в систему и поместил значение col

.

<div class="col l3 offset-l4">

И я хочу добавить на 0,5 больше размера, например,

<div class="col l3 offset-l4.5">

Как я могу это сделать?

Снимок экрана с выводом формы

Answer 1

Если вы используете систему Materialize Grid, это невозможно.Он предлагает поддержку только для целочисленных значений.

Но вы можете сделать пользовательскую реализацию.Основная идея сетки состоит в том, что вы разбиваете строку на 12 столбцов.Таким образом, значение сетки 4,5 означает 4,5 из 12 столбцов (4,5 / 12), что дает 0,375 или 37,5%.Если вы хотите смещение на 4,5 столбца, вам нужно добавить левое поле 37,5% к вашему элементу.

Поэтому вам нужно добавить следующий CSS (обратите внимание, что вы не можете использовать точку внутриимя класса):

.offset-l4-5 {
  margin-left: 37.5%;
}

Но я думаю, что было бы легче избавиться от системы сетки и написать собственный CSS для формы.