Forms 带有标签、输入和日期选择器按钮的div，其中按钮为小波纹管输入

我的div元素wch有问题，它包含用于打开日期选择器弹出窗口的标签、输入和按钮。打开此按钮的按钮在输入下方一点。我希望所有元素都在一行中。我用bootstrap。下面是我的HTML代码：

<div class="row">
        <div class="col-md-3">
            <p class="input-group">
                <label for="usr">Date From:</label>
                <input type="text" class="form-control" uib-datepicker-popup ng-model="dt1" is-open="datepickers.dt" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="open($event, 'dt')"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </p>
        </div>
        <div class="col-md-3">
            <p class="input-group">
                <label for="usr">Date To:</label>
                <input type="text" class="form-control" uib-datepicker-popup ng-model="dt2" is-open="datepickers.dtSecond" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="open($event, 'dtSecond')"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </p>
        </div>
    </div>

日期：


日期至：

有人能帮我吗？我将非常感谢你的帮助

---

致以最良好的祝愿；）

通过使用Bootstrap的

.form group

包装器，您可以实现所需的结果：

<div class="form-group">
  <label for="usr" class="control-label">Date From:</label>
    <div class="input-group">
      <input type="text" class="form-control" uib-datepicker-popup ng-model="dt1" is-open="datepickers.dt" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open($event, 'dt')"><i class="glyphicon glyphicon-calendar"></i></button>
      </div>
    </div>
</div>

日期：

您可以在Bootstrap的文档页面上阅读有关

.form group

和各种其他与表单相关的帮助程序类的更多信息：