Question

我有一个Bootstrap form-horizontal的问题。我试图通过使用Bootstrap网格系统3+（搜索栏为6）+3 = 12列来保持搜索栏位于中间。

在我添加2个select之后，它们不会被下推到下一行，即使我已经在这一行中有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。

Answer 2

每次要在水平表单布局中开始新的“字段行”时，都应添加新的<div class="form-group"></div>。你可能会这样做：

<div class="form-group">
    <div class="col-md-6 col-md-offset-3">
            <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="form-group">
    <div class="col-md-6 col-md-offset-3">
            <div class="col-md-6">
                <select class="form-control">
                </select>
            </div>
            <div class="col-md-6">
                <select class="form-control">
                </select>
            </div>
    </div>
</div>

另外，看看我如何添加col-md-offset-3来推送div，而不是放一个空白div。

Bootstrap形式横向：我做错了什么？

2 个答案: