Как сделать квадратные textbox для ввода кода?

Question

[Nik Faraday]

Мне нужно сделать квадратные текстбоксы для двухфакторной авторизации. Не могу использовать класс row из bootstrap'а, потому что при переходе на мобильную версию, они будут просто смещены в столбец, а мне нужно, что бы они были в ряд всегда

UPD: пример скиншнота взял из интернета и скинул ниже

Answer 1

[Semantic.Moscow]

ну так запретите перенос или поместите поля в блок с фиксированной минимальной шириной

Comments

[Nik Faraday]

Объясните, пожалуйста, я просто не дизайнер и вообще с html/css сталкиваюсь крайне редко, т.к. работаю с бекендом. Буду очень благодарен

[Semantic.Moscow]

Nik Faraday, чтобы поместиться в заданные рамки, ваше описание оформления переносит поля в столбик - логичное и предсказуемое поведение.

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

через консоль разработчика посмотрите какой размер у этого блока в "нормальном" состоянии,
и укажите атрибут min-width равный этому "нормальному" размеру, желательно в пикселях.

* вот только тогда, у вас в мобильном представлении может появиться горизонтальный скроллинг.
чтобы этого избежать, для мобильного представления придётся уменьшать размер полей или их отступы,
а может быть и вовсе заменить всё это одним единственным полем

[Nik Faraday]

Спасибо, ваш комментарий подтолкнул меня на мысль, что это всё можно сделать таблицей, свой ответ я написал с рабочим решением, спасибо

[Nik Faraday]

Semantic.Moscow подтолкнул меня на мысль, что можно использовать таблицу. Ниже привёл код решения проблемы:

<table>
    <tbody>
        <tr>
            <td>
                <input type="text" class="form-control" />
            </td>
            <td>
                <input type="text" class="form-control" />
            </td>
            <td>
                <input type="text" class="form-control" />
            </td>
            <td>
                <input type="text" class="form-control" />
            </td>
        </tr>
    </tbody>
</table>

[Semantic.Moscow]

или:

<stype>fieldset{min-width:200px}</style><fieldset><input type="text" class="form-control" /><input type="text" class="form-control" />
<input type="text" class="form-control" /><input type="text" class="form-control" /></fieldset>