Как сделать простую горизонтальную форму Bootstrap, которая выглядит правильно на телефоне, планшете и компьютере. А именно, я хочу, чтобы комбо было выровнено, как показано в примере, но я не хочу, чтобы комбо больше, чем необходимо, и мне нужен только небольшой разрыв между меткой и комбо. Затем, когда размер экрана слишком мал, чтобы соответствовать этикетке и комбо, я хочу, чтобы они были сложены.
В частности, пример Boostrap использует всю ширину 100%, которую я не хочу, я не хочу, чтобы комбо было более широким, чем необходимо, и мне не нужен большой разрыв между меткой и комбо.
Я попытался добавить col- авто, но комбо больше не выравнивается по горизонтали друг от друга.
Теперь я попытался добавить значения col- [1-12] для меток и комбо, как описано в https://getbootstrap.com/docs/4.1/components/forms/#column-sizing, но тогда он не корректно стекал, когда идет маленький телефон.
Затем я попытался использовать col- md, поэтому итоговые значения меньше 12, но на главном экране он выглядит не так, потому что теперь и ярлык, и комбо принимают одно и то же пространство, поэтому они имеют половину экрана каждый и нигде не близки друг к другу.
<link href="#" onclick="location.href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css'; return false;" rel="stylesheet" type="text/css">
<div>
<div class="form-row">
<label for="discogsGenreOverwriteOption" id="discogsGenreOverwriteOptionlabel" class="col-form-label col-xs-12 col-sm-6 col-md-5">
Genre
</label>
<div class="col-xs-12 col-sm-3 col-md-2">
<select aria-describedby="discogsGenreOverwriteOptionhelp" class="custom-select" name="discogsGenreOverwriteOption" id="discogsGenreOverwriteOption">
<option value="0">
Always replace values
</option>
<option value="1">
Always add values
</option>
<option value="2">
Replace if empty
</option>
<option selected="selected" value="3">
Never Replace
</option>
</select>
</div>
</div>
<div class="form-row">
<label for="discogsGenreFromOption" id="discogsGenreFromOptionlabel" class="col-form-label col-xs-12 col-sm-6 col-md-5">
From
</label>
<div class="col-xs-12 col-sm-3 col-md-2">
<select aria-describedby="discogsGenreFromOptionhelp" class="custom-select" name="discogsGenreFromOption" id="discogsGenreFromOption">
<option value="0">
Discogs Style
</option>
<option value="1">
Discogs Genre
</option>
<option value="2">
Discogs Style and Genre
</option>
</select>
</div>
</div>
</div>