Невозможно получить 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 чтобы каждая метка сокращалась до соответствия, но тогда метки/входы не будут выравниваться вертикально вниз по странице...

enter image description here

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

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

Опция Bootstrap Grid

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

enter image description here

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