#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>