html - 如何使用 Bootstrap 3 将同一行中的三个元素对齐？

Question

我试图将同一行中的三个元素对齐，但在 Bootstrap 3 中执行此操作时遇到问题。这是它们现在的样子:

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

我这里有一个 fiddle :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-horizo​​ntal 没有用处。

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>