我的div元素wchich有问题,包含用于打开datepicker弹出窗口的标签,输入和按钮。按钮wchich打开这一个是在输入下面一点点。我希望将所有元素放在一行中。我使用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>
有人可以帮助我吗?我很乐意帮助你 最好的问候;)
答案 0 :(得分:1)
通过使用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
和各种其他与表单相关的帮助程序类的更多信息:http://getbootstrap.com/css/#forms