Bootstrap 4 Меню по центру при отображении на мобильном телефоне

Question

Я хотел бы создать меню, которое выглядит следующим образом: Я справился с этим кодом, но когда я иду и проверяю отзывчивость на мобильном телефоне, я получаю что-то вроде этого:

<div  id = "menu" style = "display: flex; justify-content: center;">
            <div class="row">    
                <div class="input-group">
                <span style="color:black" class="input-group-addon">
                     <select id="selection" onchange="getValues(this.value)">
                     <option>Choose Category</option>
                     <option>Notary</option>
                     <option>Deed Date</option>
                     <option>Person</option>
                     <option>Place</option>
                     <option>Manuscript Reference</option>
                     <option>Subject</option>
                     </select>
                    </span>
                    <input class="autocomplete"id="search" type="text" class="form-control" name="search" placeholder="Choose a category" style ="max-width:200px;" disabled=true >
                    <button class="btn btn-default" type="button" id="searchButton" onclick="doSparql(this.value)"><span class="fa fa-search"></span></button>
            </div>
            </div>
        </div>

Я хотел бы показать меню по центру. Это как-то возможно? Кроме того, почему раскрывающееся меню «Выбрать категорию» и текстовое поле имеют разную высоту?

Answer 1

строк (.row) предназначены только для непосредственного размещения столбцов (.col-*) (не .input-group)

стиль обоих входов одинаков, и центрирование должно работать нормально.

<div id="menu" class="py-4 d-flex justify-content-center">
    <div class="row">
        <div class="col-sm-auto">
        <div class="input-group">
            <span style="color:black" class="input-group-addon">
                <select id="selection" class="form-control" onchange="getValues(this.value)">
                    <option>Choose Category</option>
                    <option>Notary</option>
                    <option>Deed Date</option>
                    <option>Person</option>
                    <option>Place</option>
                    <option>Manuscript Reference</option>
                    <option>Subject</option>
                </select>
            </span>
            <input id="search" type="text" class="form-control" name="search" placeholder="Choose a category" style="max-width:200px;" disabled=true>
            <button class="btn btn-default" type="button" id="searchButton" onclick="doSparql(this.value)"><span class="fa fa-search"></span></button>
        </div>
        </div>
    </div>
</div>

https://www.codeply.com/p/J6xnSneTr4