Выравнивание элементов формы в Bootstrap?

Question

[Vitaly]

Как выровнять элементы формы (чекбокс с изображением), чтобы они располагались в несколько рядов один под другим (т.е. были одной ширины), при этом кол-во элементов бы варьировалось в зависимости от ширины экрана?

Сейчас использую такой код (bootstrap 4.1):

<div class="col">
                <h2>Возможная форма и размер</h2>
                <div class="row">
                    <form class="form-inline">
                        <div class="col-auto">
                            <div class="form-check" id="shape_and_size">
                                <input class="form-check-input" type="checkbox" id="inlineCheck">
                                <label class="form-check-label" for="inlineCheck">A</label>
                                <img src="content/images/shapes_of_plates/A.jpg" height="50px">
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="form-check" id="shape_and_size">
                                <input class="form-check-input" type="checkbox" id="inlineCheck">
                                <label class="form-check-label" for="inlineCheck">B</label>
                                <img src="content/images/shapes_of_plates/B.jpg" height="50px">
                            </div>
                        </div>
...

Answer 1

[weblucker]

Привет, сейчас проблема в том, что они разной ширины, задай фиксированную ширину у .form-check, и должно вполне помочь.