如何在引导程序中将选择标签放在左侧

时间:2016-09-02 10:33:16

标签: html css twitter-bootstrap

我有这个问题:

enter image description here

这是我的代码:

<form class="form-horizontal">
    <div class="row">
        <div class="col-sm-2">
            <div class="form-group">
                <label class="control-label">Select list:</label>
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="form-group">
                <label class="control-label" style="display: inline-block;">Select list:</label>
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="form-group">
                <label class="control-label">Select list:</label>
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="form-group">
                <label class="control-label">Select list:</label>
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="form-group">
                <button class="btn btn-default">Filtra</button>
            </div>
        </div>
    </div>
    </form>

如何将标签并排选择? 我尝试使用form-horizontal,但无效。

由于

2 个答案:

答案 0 :(得分:2)

使用form-inline代替form-horizontal,您也可以使用此链接作为参考http://getbootstrap.com/css/#forms

答案 1 :(得分:1)

form-inline课程添加到您的<form>代码中 像这样:

<form class="form-inline">