Как исправить расстояние Col в следующем модале

Question

У меня проблема с разделением области между разделами и двумя кнопками, как и вокруг нее.

Я пытаюсь добавить пространство между разделами и 2 кнопками, сохраняя форму, но не могу этого сделать, не разрушив кнопку. формирует то, что у меня есть atm

форма в git в индексе от 187 до 258, код раздела от 223 234 https://github.com/ahmedabdo97/bootstrap4

<div class="form-group row col-12">
    <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="col-12 col-md-3 mr-auto col-form-label">Sections</label>
        <label class="btn btn-success active  col-md-5">
        <input type="radio" name="non-smoking" id="non-smoking" autocomplete="off" checked> Non-Smoking
        </label>
        <label class="btn btn-danger col-md-4">
        <input type="radio" name="smoking" id="smoking" autocomplete="off"> Smoking
        </label>
    </div>
</div>

фактический результат https://github.com/ahmedabdo97/bootstrap4/blob/master/Screenshot_1.png

Answer 1

Ваши теги не организованы должным образом. Попробуйте добавить

<label class="btn btn-success active  col-md-5">
  <input type="radio" name="non-smoking" id="non-smoking" autocomplete="off" checked> Non-Smoking
 </label>
 <label class="btn btn-danger col-md-4">
   <input type="radio" name="smoking" id="smoking" autocomplete="off"> Smoking
</label>

в тег Div и добавить .ml-2 к нему