html - 并排放置 2 个 angularjs 日期选择器，而不是顶部和下方

Question

我正在使用 2 个 Angularjs-ui boorstrap 日期选择器。http://angular-ui.github.io/bootstrap/

我想并排放置 2 个日期选择器。不幸的是，我的 html 代码将它们一个放在上面，另一个放在下面。我的 html 代码如下所示；

<h4>Start date</h4>
        <div class="row"">
            <div class="col-md-6">
                <p class="input-group">
                  <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" 
                         datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" 
                         close-text="Close" />
                  <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                  </span>
                </p>
            </div>
        </div> <!-- <div class="row"> Registration start date -->   
<h4>End date</h4>
    <div class="row">
        <div class="col-md-6">
            <p class="input-group">
              <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" 
                     datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" 
                     close-text="Close" />
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>
        </div>
    </div> 

如何更改 html 代码以使 2 个日期选择器（带有标题文本）并排显示？

Answer 1

<div class="row">
    <div class="col-md-6">
        <span>Start date</span>
    </div>
    <div class="col-md-6">
        <span>End date</span>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <p class="input-group">
            <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened"
                   datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"
                   close-text="Close" />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
            </span>
        </p>
    </div>
    <div class="col-md-6">
        <p class="input-group">
            <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened"
                   datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"
                   close-text="Close" />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
            </span>
        </p>
    </div>
</div>