Question

我尝试使用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>

Answer 1

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

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

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

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

1 个答案: