引导水平表单元素的顺序混淆了吗？

Question

我正在尝试使用引导程序创建水平表单布局：两个下拉菜单和一个输入框。我已经成功地使用 .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>

Answer 1

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

请注意，当它应该是 class="form-inline" 而没有句点时，您将 class=".form-inline" 作为类。

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