Сетка системы внутри формы начальной загрузки: встроенный выбор и ввод

Question

Я устанавливаю форму в начальной загрузке, и у меня есть эта часть:

<div class="form-row">
        <div class="col-xs-12 col-md-12 col-lg-12">
             <select class="form-control" id="valueToFilter">
                  <option>Fecha</option>
             </select>
        </div>
    </div>
    <div class="form-row">
        <div class="col-xs-2 col-md-2 col-lg-">
            <select class="form-control" id="filterOperator">
                <option> > </option>
                <option> < </option>
                <option> = </option>
            </select>
        </div>

        <div class="col">
            <label for="filterValue" class="sr-only">Filter value</label>
            <input type="text" class="form-control" id="filterValue">
        </div>
    </div>

Так это выглядит прямо на рабочем столе:

Но в мобильном телефоне он выглядит не встроенным

Я думаю, что у меня достаточно места, потому что select - это просто оператор (>, <или =), так что, есть ли способ, которым я могу принудительно встроить эти два члена в строку? почему col-xs-2 вообще не работает? </p>

Заранее спасибо.

Answer 1

Больше нет инфикса -xs в Bootstrap 4.

   <div class="form-row">
        <div class="col-2 col-md-2">
            <select class="form-control" id="filterOperator">
                <option> &gt; </option>
                <option> &lt; </option>
                <option> = </option>
            </select>
        </div>

        <div class="col">
            <label for="filterValue" class="sr-only">Filter value</label>
            <input type="text" class="form-control" id="filterValue">
        </div>
    </div>

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

---

Прочитать документы сетки Bootstrap