Выровняйте метку поверх загрузочного переключателя

Question

Я использую три переключателя начальной загрузки, которые мне нужно выровнять рядом друг с другом, и соответствующую метку сверху.И также мне нужно, чтобы эти переключатели были на том же уровне, что и все другие мои входные данные (текстовое поле / раскрывающийся список).Я очень плохо разбираюсь в CSS, поэтому я не смог понять это правильно.Вот что я хочу:

<div class="col-md-6">
  <div class="form-group">
    //input fields
  </div>
</div>
<div class="col-md-6">
  <div class="form-group">
    <label>IsFeatured</label>
    <label class="switch">
      <input type="checkbox" checked>
      <span class="slider round"></span>
    </label>
    <label>IsNew</label>
    <label class="switch">
      <input type="checkbox" checked>
      <span class="slider round"></span>
    </label>
    <label>IsReturnable</label>
    <label class="switch">
      <input type="checkbox" checked>
      <span class="slider round"></span>
    </label>
  </div>
</div>

Answer 1

IsFeatured IsNewIsReturnable Просто используйте систему сетки.

Answer 2

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

<div class="col-sm-4">
    <div class="form-group">
         <label>Test1</label>
         <div>
             <label class="switch">
                <input type="checkbox" checked>
                <span class="slider round"></span>
             </label>
          </div>
     </div>
</div>
<div class="col-sm-4">
    <div class="form-group">
         <label>Test2</label>
         <div>
             <label class="switch">
                 <input type="checkbox" checked>
                 <span class="slider round"></span>
          </label>
     </div>
</div>
<div class="col-sm-4">
    <div class="form-group">
         <label>Test3</label>
         <div>
             <label class="switch">
                 <input type="checkbox" checked>
                 <span class="slider round"></span>
          </label>
     </div>
</div>

Надеюсь, это поможет