引导程序形式内的网格系统：内联选择和输入

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根本不起作用？

谢谢。

Answer 1

Bootstrap 4中不再有-xs前缀。

   <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

---

Read the Bootstrap grid docs