引导水平形式元素的顺序混合了吗?

时间:2014-07-26 18:38:54

标签: html css css3 twitter-bootstrap positioning

我尝试使用bootstrap创建一个水平表单布局:两个下拉列表和一个输入框。我已成功使用.form.inline类将元素设置为水平,但由于我添加了这个类,由于某种原因,我的输入框已经跳转到两个下拉列表的左侧,即使它遵循了下拉列表中的下拉列表。 HTML。我需要它在下拉菜单的右边 - 任何解决方案?这是代码:

<form class=".form-inline" role="form">

        <!-- Department button -->
        <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Department <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
        </div>


        <!-- Course button -->

        <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Course Number <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
        </div>


        <!--Professor Input-->
            <div class="col-sm-4">
            <input type="text" class="form-control" id="input" placeholder="Instructor">
            </div>

    </form>

1 个答案:

答案 0 :(得分:2)

<form class=".form-inline" role="form">

请注意,如果没有句点,则class=".form-inline"class="form-inline"

您还需要将input父div的课程从.col-sm-4更改为form-group