在同一行对齐 Bootstrap 输入框和按钮答案

【问题标题】：Align Bootstrap input box and button on same row在同一行对齐 Bootstrap 输入框和按钮
【发布时间】：2015-05-19 15:42:20
【问题描述】：

在Bootstrap中，如果我有一个标签和按钮在同一行的输入框，我如何让按钮对齐？我不想使用 input-append 将其附加到输入框 - 有什么想法吗？

                    <div class="row">

                            <div class="form-group col-sm-3">
                                <label for="txtSchedFromDate">
                                    From:</label>
                                <input type="text" class="form-control input-sm" id="txtSchedFromDate" />
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="txtSchedToDate">
                                    To:</label>
                                <input type="text" class="form-control input-sm" id="txtSchedToDate" />
                            </div>
                            <div class="form-group col-sm-3">
                                <button type="button" id="btnResetEngineers" class="btn btn-default">
                                        Reset Engineers</button>
                            </div>

                    </div>

JSFiddle

非常感谢

【问题讨论】：

查看inline-forms getbootstrap.com/css/#forms-inline的文档部分
感谢@Schmalzy 的回复-我已经添加了内联表单，但也使用了表单和输入组，但它仍然将按钮与标签而不是输入框内联-确实如此取决于屏幕的大小 - 如果我摆脱了我要执行的标签并使用占位符，它会起作用，但这在 IE9 中不起作用：-\
嗯，如果我删除列大小它可以工作 - 我仍然希望标签位于输入字段的顶部而不是侧面，但我必须凑合着做 - 再次感谢

标签： html twitter-bootstrap-3

【解决方案1】：

这些是我所做的更改只需在按钮类中包含表单控件和按钮 div 的空标签

<div class="form-group col-sm-3">
  <label for="txtSchedFromDate">
    &nbsp;
  </label>
  <button type="button" id="btnResetEngineers" class="form-control btn btn-default">Reset Engineers</button>
</div>

这是一个更正的小提琴

https://jsfiddle.net/Indu9594/rcwyso3x/

【讨论】：