UI 引导日期选择器未对齐答案

【问题标题】：UI bootstrap datepicker not alignedUI 引导日期选择器未对齐
【发布时间】：2016-10-04 16:56:38
【问题描述】：

我有一个 UI-Bootstrap 日期选择器

 <div class="col-md-2">

    <label for="datepicker">Select Date<span class="compulsary">*</span></label><br>

     <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" id="datepicker"/>
     <span class="input-group-btn">
     <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
     </span>

</div>

这是输入字段的css

#datepicker{
    height: 50px;
    width: 60%;
}

日历按钮出现在输入字段下方，而不是在其旁边，就好像 <br> 已应用于它一样。我希望按钮出现在字段旁边。我怎样才能做到这一点？

【问题讨论】：

你能做一个工作的sn-p吗？还请向我们展示其外观的屏幕截图，以便我们为您提供帮助。

标签： html css twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

根据 Bootstrap，您应该使用 input groups。

<div class="col-md-2">

    <label for="datepicker">Select Date<span class="compulsary">*</span></label><br>

    <div class="input-group">
        <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" id="datepicker"/>
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </div>

【讨论】：

谢谢！像魅力一样工作！

【解决方案2】：

我认为您正在寻找horizontal forms。

<form class="form-horizontal">
    <div class="form-group">
        <label for="datepicker">Select Date<span class="compulsary">*</span></label>
        <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" id="datepicker"/>
    </div>
</form>

【讨论】：