引导窗体内的网格系统:内联选择和输入

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只是一个运算符(>，<或=)，那么，有什么方法可以强制这两个成员的内联吗？为什么-xs-2根本不起作用？

提前谢谢。

Answer 1

   <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

读取引导网格文档

在移动设备上垂直堆叠的引导列