Я практикую свои навыки начальной загрузки, но каким-то образом я застрял во встраивании ввода и выборе
это результат, который я хочу
Однако я получил это как-то
используя этот код
<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel = "stylesheet" />
<div class = "col-md-2">
<label>Length of Stay</label>
<div class = "form-group d-inline">
<input type = "text" class = "form-control">
<select class = "custom-select">
<option disabled selected>Select Length</option>
<option value = "Years">Years</option>
<option value = "Months">Months</option>
<option value = "Days">Days</option>
</select>
</div>
</div>
Любая идея, как я могу это исправить?
добавлен класс начальной загрузки d-flex
в form-group
. Спасибо
<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel = "stylesheet" />
<div class = "col-md-2">
<label>Length of Stay</label>
<div class = "form-group d-flex">
<input type = "text" class = "form-control">
<select class = "custom-select">
<option disabled selected>Select Length</option>
<option value = "Years">Years</option>
<option value = "Months">Months</option>
<option value = "Days">Days</option>
</select>
</div>
</div>
Я предлагаю вам использовать display:flex;
, чтобы сделать это. Таким образом, вам будет намного проще выравнивать элементы. Попробуйте этот тестовый код
<div class = "col-md-2">
<label>Length of Stay</label>
<div class = "form-group d-flex flex-row">
<div>
<input type = "text" class = "form-control">
</div>
<div>
<select class = "custom-select">
<option disabled selected>Select Length</option>
<option value = "Years">Years</option>
<option value = "Months">Months</option>
<option value = "Days">Days</option>
</select>
</div>
</div>
</div>
Ссылка на скрипт JS: https://jsfiddle.net/SJ_KIllshot/ucsvpb29/