使用引导程序将选择下拉列表与输入字段对齐答案

【问题标题】：Align a select dropdown with a input field with bootstrap使用引导程序将选择下拉列表与输入字段对齐
【发布时间】：2016-03-22 11:02:10
【问题描述】：

我正在尝试使用引导程序将我的选择下拉菜单与我的输入字段水平对齐。但到目前为止它还没有工作。我使用<fieldset class="inline-fields"> 来做到这一点。这就是我想要的：

在这里你可以找到一个 plunker： https://plnkr.co/edit/PtW626uq9jkLCbBLR9Xc?p=preview

【问题讨论】：

使用 col-md- 类分配水平空间

标签： css forms twitter-bootstrap

【解决方案1】：

<fieldset class="inline-fields">
    <label>search</label>
        <p>Find all:</p>
        <div class = "row col-sm-12">
            <div class = "row col-sm-6 col-md-6">
                <select class="form-control" id="column_select">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
            </div>
            <div class = "row col-sm-6 col-md-6">
                <label for="keten2"></label>
                <input type="text" class="form-control" id="keten2" placeholder="Voer de naam van" name="keten2"></input>
                <br/>
            </div>
        </div>
    </fieldset>

如上所述添加引导类。为我工作。

通过引导教程并了解引导网格系统。

【讨论】：

【解决方案2】：

将两个控件包装在具有类行的 Div 中

<div class="row"> </div>

然后尝试将两个控件分别包装在一个：

<div class="col-xs-6"> </div>

W3Schools 是帮助理解引导网格的好资源：http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

希望对您有所帮助。

【讨论】：