Html 表中的引导css

我试图用HTML创建一个表示可编辑内容的表，然后使用Bootstrap components/CSS对其进行样式设置

一列包含基于内容的不同组件。在最简单的情况下，它是一个单独的组件，类似于输入文本区域

在其他情况下，它可能是不同组件的集合。我很难保持两个或多个引导组件水平定向，而不是堆叠在单元中

下面是我尝试做的一部分：。（确保您的浏览器窗口设置为768像素宽度或更大。）

JSFIDLE的顶部以内联形式显示了相同的组件列表。请注意，在第二行中，“微调器”文本输入字段与选择组件（“宽”）位于同一行

在下表中，可以看到相同的组件，但“选择”和“微调器”文本输入是堆叠的

有没有办法强迫两个组件水平排列而不是垂直堆叠

我知道我可以在此列中嵌入另一个表，但我想看看是否有更简单的方法

下面是该单元格中的HTML：

        <td>
            <div class='form-group'>
                <select class="form-control input-sm">
                    <option value="Broad">Broad</option>
                    <option value="Moderate">Moderate</option>
                    <option value="Single">Single</option>
                </select>
                <div class="input-group input-group-sm">
                    <span class="input-group-btn"> 
                        <button class="btn btn-default" type="button"> <i class="fa fa-minus"></i> </button>
                    </span> 
                    <input class="form-control" type="text" value="+0" style="text-align: right; min-width: 4em;" /> 
                    <span class="input-group-btn"> 
                        <button class="btn btn-default" type="button"> <i class="fa fa-plus"></i> </button>
                    </span>
                </div>
            </div>
        </td>

宽阔的
中庸的
单身