Невозможно получить Bootstrap 4 Горизонтальная форма для работы по мере необходимости

Как сделать простую горизонтальную форму 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>

Ответ 1

Проблема в том, что Flexbox не работает в строках/столбцах так, как это делает таблица. Вы можете использовать col-sm-auto чтобы каждая метка сокращалась до соответствия, но тогда метки/входы не будут выравниваться вертикально вниз по странице...

Похоже, вы хотите сжать столбец меток, чтобы он соответствовал ширине самой широкой метки. Это можно сделать, поместив все метки в 1 столбец и входы в другой столбец, но затем каждая метка/вход не будет складываться вместе на мобильных экранах.

Там нет элегантного решения Bootstrap для решения этой проблемы. Вы можете использовать Таблицы, сетку CSS или опцию, описанную @Toan Lu в комментариях.

Опция Bootstrap Grid

Я бы рекомендовал просто использовать col-sm-2 или col-sm-3 для ярлыков (приспосабливая их примерно к самой широкой этикетке) и text-truncate до эллипсиса (...) переполняющего текста до тех пор, пока они не упадут вертикально на мобильный...

<div class="form-row">
        <label class="col-form-label col-sm-2 text-truncate">
            Label
        </label>
        <div class="col-sm-3 col-md-2">
             <select>..</select>
        </div>
</div>

https://www.codeply.com/go/e3mDrmMv7k

Опция таблицы

С помощью этой опции width:1% используется на этикетках, чтобы они уменьшались до ширины самого широкого. Используйте text-nowrap чтобы остановить этикетки от упаковки. Каждая строка строки представляет собой d-table-row и каждая метка представляет собой d-table-cell...

.col-form-label.d-sm-table-cell {
   width: 1%;
}
<div class="container py-3">
    <div class="form-row d-table-row">
        <label class="col-form-label col-sm-2 d-sm-table-cell text-nowrap">
            Genre
        </label>
        <div class="col-sm-3 col-md-2">
            <select>
             ..
            </select>
        </div>
    </div>
    <div class="form-row d-table-row">
        <label class="col-form-label col-sm-2 d-sm-table-cell text-nowrap">
            Longer label here
        </label>
        <div class="col-sm-3 col-md-2">
            <select>
                ..
            </select>
        </div>
    </div>
</div>

https://www.codeply.com/go/e3mDrmMv7k (см. второй вариант)

Параметр table делает divs в tr/td, но также работает с гибкостью, позволяя полям стек вертикально на мобильных устройствах. Подробнее читайте в [d-table classes] (Да, часть Bootstrap 4: http://getbootstrap.com/docs/4.1/utilities/display/#notation).

Опция CSS Grid

Еще один метод (не-Bootstrap 4) использует сетку CSS. Сделайте строки display:grid Используйте fr проклейки на 2 grid-template-columns через ряд.

.d-grid {
  display: grid;
  grid-template-columns: 0fr 1fr;
}

https://www.codeply.com/go/9Z7Hg2tl1H

Ответ 2

Работает как ожидалось, если вы используете более раннюю версию bootstrap css:

 <link href="#" onclick="location.href='https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'; return false;" rel="stylesheet" type="text/css">