Не удается заставить Bootstrap 4 Horizontal Form работать так, как требуется

Question

Как создать простую загрузочную горизонтальную форму , которая выглядит правильно на телефоне, планшете и компьютере.А именно, я хочу, чтобы комбинации были выровнены, как показано в примере, но я не хочу, чтобы комбинации были больше, чем необходимо, и мне нужен только небольшой разрыв между меткой и комбо.Затем, когда размер экрана слишком мал, чтобы поместиться в метку и комбо, я хочу, чтобы они были сложены.

В частности, пример Boostrap использует всю ширину 100%. Я не хочу этого, я не хочу, чтобы комбо было ширетогда необходимо, и я не хочу большой разрыв между лейблом и комбо.

Я попытался добавить col-auto , но затем комбо больше не выравнивались по горизонтали друг с другом.

Я сейчас попытался добавить значения col- [1-12] дляДобавьте метку и комбо, как описано в https://getbootstrap.com/docs/4.1/components/forms/#column-sizing, но при переходе на маленький телефон он неправильно складывался.

Затем я попытался использовать col-md, чтобы итоговое значение было меньше 12, но оно выглядит неправильнона главном экране, потому что теперь и метка, и комбинация занимают одно и то же место, поэтому они имеют половину экрана и не располагаются рядом друг с другом.

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" 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>

Answer 1

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

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">

Answer 2

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

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

Нет элегантного решения этой проблемы, предназначенного только для начальной загрузки.,Вы можете использовать таблицы, сетку 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 (см. 2-й вариант)

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

---

Параметр CSS Grid

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

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

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