程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

UI 引导程序日期选择器未对齐

发布于2022-12-06 19:56     阅读(1230)     评论(0)     点赞(27)     收藏(0)


我有一个 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>已经应用了它一样。我希望按钮出现在字段旁边。我怎样才能做到这一点?


解决方案


您应该根据 Bootstrap使用输入组。

<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>




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/459649/d678b035e44a8c27cb34/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

27 0
收藏该文
已收藏

评论内容:(最多支持255个字符)