如何使用Bootstrap 3将同一行中的三个项目对齐？

Question

我试图在同一行中对齐三个项目，但在Bootstrap 3中遇到这个问题。以下是他们现在的样子：

但我希望它们在同一行（水平）对齐而不是垂直对齐。

我有一个小提琴：http://jsfiddle.net/DTcHh/2132/

相关代码是：

 <div class="pull-right">
        <form action="#" method="post" class="form-horizontal">
            <div class="control-label">
                <div class="control"> 

Answer 1

只有表单具有特定宽度时，才能在表单上向右拉。在大多数情况下，您不想使用它，但使用网格系统。

您应该使用.input-group向输入添加按钮并在同一行显示它们。

您没有使用标签，因此.form-horizontal没有用。

See the fiddle

<div class="row">
    <div class="col-sm-3 col-md-3">
        <ul class="nav nav-pills">
            <li class="active"><a href="#">Pill1</a>
            </li>
            <li class=""><a href="#"><span id="pendingcount">Pill2</span></a>
            </li>
        </ul>
    </div>

    <div class="col-sm-6 col-sm-push-3">
        <form action="#" method="post">
            <input type="hidden" value="Date" name="filtertype" class="dropdown-field">
            <div class="input-group">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li> <a href="#" data-value="date">Date</a></li>
                        <li> <a href="#" data-value="requestor">Requestor</a></li>
                        <li> <a href="#" data-value="classification">Classification</a></li>
                        <li> <a href="#" data-value="destination">Destination</a></li>
                        <li> <a href="#" data-value="description">Description</a></li>
                        <li> <a href="#" data-value="filename">File Name</a></li>
                        <li> <a href="#" data-value="extractedtext">Extracted Text</a></li>
                        <li> <a href="#" data-value="extractedkeyword">Extracted Keywords</a></li>
                        <li> <a href="#" data-value="status">Status</a></li>
                        <li> <a href="#" data-value="scancode">Scan Code</a></li>
                    </ul>
                </span>
                <input type="text" name="filterterm" value="" class="form-control">
                <span class="input-group-btn">
                    <button type="submit" class="btn btn-default "> <i class="glyphicon glyphicon-search"></i></button>
                </span>
            </div>
        </form>
    </div>
</div>