html - Bootstrap 形式-水平 : What am I doing wrong?

Question

我对 Bootstrap form-horizo​​ntal 有疑问。我试图通过使用 Bootstrap 网格系统 3+(搜索栏为 6)+3 = 12 列将搜索栏保持在中间。

在我添加 2 个选择后，它们不会被推到下一行，即使我在这一行中已经有 12 列。

<div class="container">
        <form role="form" class="form-horizontal" method="get" action="<?php $_SERVER['PHP_SELF']; ?>">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                    </div>
                </div>
            </div>
            <div class="col-md-3"></div>
            <div class="form-group">
                <div class="col-md-3"><select class="form-control"></select></div>
                <div class="col-md-3"><select class="form-control"></select></div>
            </div>
        </form>
</div>

我在这里做错了什么？

谢谢!

Answer 1

我不太确定您希望它看起来如何，但问题是您在 3 列旁边有 .form-group 而不是在其中一列内。这解决了问题:

<div class="container">
    <form role="form" class="form-horizontal">
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <div class="col-md-3">
                    <select class="form-control"></select>
                </div>
                <div class="col-md-3">
                    <select class="form-control"></select>
                </div>
            </div>
        </div>
    </form>
</div>

参见 Bootply .