Маржа не работает с элементами формы начальной загрузки

#html #css #bootstrap-4

Вопрос:

Моя форма:

Моя форма

Я пытаюсь выровнять области кнопок/ввода в своей форме. Я попытался добавить параметры начальной загрузки в их классы, чтобы переместить их в недоступные, например, добавив ml-n2 к вводу даты, чтобы приблизить его к метке «Дата и время». Я перепробовал множество вариантов CSS/начальной загрузки, чтобы изменить поля, и я не понимаю, почему кнопки/входы не двигаются. Как я могу выровнять левую сторону кнопки «Для некурящих», ввода «Дата» и кнопки «Отмена»? Я связал фотографию своей формы выше.

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group row">
  <label name="section" class="col-12 col-md-3 col-lg-2 col-form-label">Section</label>
  <div class="btn-group btn-group-toggle btn-sm" data-toggle="buttons">
    <label class="btn btn-success btn-sm text-white"><input type="radio" name="options" id="option1" autocomplete="off" class="active">Non-Smoking</label>
    <label class="btn btn-danger btn-sm text-white"><input type="radio" name="options" id="options2" autocomplete="off">Smoking</label>
  </div>
</div>
<div class="form-group row">
  <label name="datetime" class="col-12 col-md-3 col-lg-2 col-form-label">Date and Time</label>
  <div class="col-12 col-sm-4 mt-3">
    <input type="text" class="form-control" name="date" id="date" value="Date">
  </div>
  <div class="col-12 col-sm-4 mt-3">
    <input type="text" class="form-control" name="time" id="time" placeholder="Time">
  </div>
</div>
<div class="form-group row">
  <div class="offset-md-2">
    <button type="button" class="btn btn-secondary text-white">Cancel</button>
  </div>
  <div class="ml-1">
    <button type="submit" class="btn btn-primary text-white">Reserve</button>
  </div>
</div> 

Ответ №1:

класс col и класс btn-группы имеют некоторые значения заполнения по умолчанию, поэтому попробуйте изменить их. Установите значение отступа слева равным 0%.

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group row">
  <label name="section" class="col-12 col-md-3 col-lg-2 col-form-label">Section</label>
  <div class="btn-group btn-group-toggle btn-sm" data-toggle="buttons"style="padding-left:0% !important" >
    <label class="btn btn-success btn-sm text-white"><input type="radio" name="options" id="option1" autocomplete="off" class="active">Non-Smoking</label>
    <label class="btn btn-danger btn-sm text-white"><input type="radio" name="options" id="options2" autocomplete="off">Smoking</label>
  </div>
</div>
<div class="form-group row">
  <label name="datetime" class="col-12 col-md-3 col-lg-2 col-form-label">Date and Time</label>
  <div class="col-12 col-sm-4 mt-3" style="padding-left:0% !important">
    <input type="text" class="form-control" name="date" id="date" value="Date">
  </div>
  <div class="col-12 col-sm-4 mt-3" style="padding-left:0% !important">
    <input type="text" class="form-control" name="time" id="time" placeholder="Time">
  </div>
</div>
<div class="form-group row">
  <div class="offset-md-2">
    <button type="button" class="btn btn-secondary text-white">Cancel</button>
  </div>
  <div class="ml-1">
    <button type="submit" class="btn btn-primary text-white">Reserve</button>
  </div>
</div>