Блог

Главная - Вопросы по программированию - Bootstrap расставляет флажки в 3 равномерно расположенных столбца и центрирует внутри формы

Bootstrap расставляет флажки в 3 равномерно расположенных столбца и центрирует внутри формы

#html #css #checkbox #bootstrap-4

#HTML #css #флажок #bootstrap-4

Вопрос:

Я изо всех сил пытаюсь установить свои флажки в приведенной ниже форме в 3 равномерно расположенных столбца и идеально центрировать внутри формы. В настоящее время он выглядит так, как показано ниже…

введите описание изображения здесь

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

HTML:

`

             <form action="/signup" method="POST">
                <div class="form-group">
                    <input 
                        type="text"
                        name="firstName"
                        id="first-name"
                        class="form-control" 
                        placeholder="First Name"    
                    />
                </div>
                <div class="form-group">
                    <input 
                        type="text"
                        name="surname"
                        id="surname"
                        class="form-control" 
                        placeholder="Surname"    
                    />
                </div>
                <div class="form-group">
                    <input 
                        type="email"
                        name="email"
                        id="email" 
                        class="form-control"
                        placeholder="Email"
                    />
                    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                </div>
                <fieldset class="form-group">
                    <legend>Pick your favourite 3 things</legend>
                    <div class="form-inline">
                      <label class="form-check-label">
                        <input class="form-check-input mr-2" type="checkbox" value="">
                        Option 1
                      </label>
                    </div>
                    <div class="form-inline">
                        <label class="form-check-label">
                          <input class="form-check-input mr-2" type="checkbox" value="">
                          Option 2
                        </label>
                    </div>
                    <div class="form-inline">
                        <label class="form-check-label">
                          <input class="form-check-input mr-2" type="checkbox" value="">
                          Option 3
                        </label>
                    </div>
                    <div class="form-inline">
                        <label class="form-check-label">
                          <input class="form-check-input mr-2" type="checkbox" value="">
                          Option 4
                        </label>
                    </div>
                    <div class="form-inline">
                        <label class="form-check-label">
                          <input class="form-check-input mr-2" type="checkbox" value="">
                          Option 5
                        </label>
                    </div>
                    <div class="form-inline">
                        <label class="form-check-label">
                          <input class="form-check-input mr-2" type="checkbox" value="">
                          Option 6
                        </label>
                    </div>
                    <div class="form-inline">
                        <label class="form-check-label">
                          <input class="form-check-input mr-2" type="checkbox" value="">
                          Option 7
                        </label>
                    </div>
                    <div class="form-inline">
                        <label class="form-check-label">
                          <input class="form-check-input mr-2" type="checkbox" value="">
                          Option 8
                        </label>
                    </div>
                    <div class="form-inline">
                        <label class="form-check-label">
                          <input class="form-check-input mr-2" type="checkbox" value="">
                          Option 9
                        </label>
                    </div>
                </fieldset>
                <button type="submit" class="btn btn-primary">Do it!</button>
            </form>

Комментарии:

1. Я обновил ответ и добавил метки.

Ответ №1:

 ...
<legend>Pick your 3 favourite things</legend>
<div class="row">
  <div class="col-sm-4">
    <div>
      <label>
        <input type="checkbox">
        Option 1
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox">
        Option 2
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox">
        Option 3
      </label>
    </div>
  </div>
  <div class="col-sm-4">
    <div>
      <label>
        <input type="checkbox">
        Option 4
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox">
        Option 5
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox">
        Option 6
      </label>
    </div>
  </div>
  <div class="col-sm-4">
    <div>
      <label>
        <input type="checkbox">
        Option 7
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox">
        Option 8
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox">
        Option 9
      </label>
    </div>
  </div>
</div>

Смотрите этот JSFiddle: https://jsfiddle.net/bf4vtzry/1 /

Комментарии:

1. Спасибо, Симеон. Это не работает, когда вы добавляете метки к флажкам, они просто накладываются друг на друга.

2. Я добавил JSFiddle, и он отлично работает, если экран недостаточно широк: они будут накладываться друг на друга. Насколько широк ваш экран?

3. В вашем JSFiddle вы разделили метку и флажок, тогда как я устанавливал флажок в теге label. Я хочу, чтобы они были в 3 столбцах на больших и средних экранах и были отзывчивыми, чтобы на меньших экранах они затем складывались. Кроме того, при вставке меток с разной длиной символов они больше не остаются выровненными.

4. Хорошо, я обновил код и скрипку. Возможно, вам потребуется изменить col-md-4 , например col-sm-4 , чтобы соответствовать желаемой точке останова.

5. Это отличный человек, ваша помощь очень ценится. Есть ли способ выровнять флажки, когда тексты имеют разную длину символов?