使用引导程序

时间:2016-03-22 11:02:10

标签: css forms twitter-bootstrap

我正在尝试使用bootstrap将我的选择下拉列表与输入字段水平对齐。但它到目前为止还没有奏效。我用<fieldset class="inline-fields">来做这件事。这就是我想要的:

enter image description here

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

2 个答案:

答案 0 :(得分: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>

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

浏览一个引导教程并了解引导网格系统。

答案 1 :(得分:1)

将Div控件包含在带有类行的Div中

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

然后尝试在:

中单独包装两个控件
<div class="col-xs-6"> </div>

帮助理解bootstrap网格的一个很好的资源是W3Schools:http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

希望有所帮助。