Question

我有带标签，输入和数据贴纸按钮的html。我有一个问题，因为我的datapicker按钮略高于输入。下面我展示我的HTML代码：

<div class="col-md-5 form-group">
            <div class="input-group">
                <label for="CreatedFrom">Created From</label>
                <input id = "CreatedFrom" type="text" class="form-control" ng-change="change($event,'dt')" placeholder="Generated From" ng-click="open($event, 'dt')" uib-datepicker-popup ng-model="caseFilter.dateFrom" is-open="datepickers.dt" datepicker-options="dateOptionsDt" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" readonly/>
                <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>
            </div>
        </div>

效果是：

如何在一行中同时获取数据贴纸的输入和按钮？我很感激你的帮助。

Answer 1

请试试这个

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-5 form-group">
    <label for="CreatedFrom">Created From</label>
    <div class="input-group">        
        <input id = "CreatedFrom" type="text" class="form-control" ng-change="change($event,'dt')" placeholder="Generated From" ng-click="open($event, 'dt')" uib-datepicker-popup ng-model="caseFilter.dateFrom" is-open="datepickers.dt" datepicker-options="dateOptionsDt" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" readonly/>
        <span class="input-group-addon">
            <span ng-click="open($event, 'dt')"><i class="glyphicon glyphicon-calendar"></i></span>
        </span>
    </div>
</div>
</div>
</div>

＆＃13;

Answer 2

只需将top:13px;添加为用于日历的整个按钮元素的值。

查看这个JS小提琴：AnswerFiddle

Answer 3

尝试从input.input-group中取出label标签：

<div class="col-md-5 form-group">
  <label for="CreatedFrom">Created From</label>
  <div class="input-group">
    <input id = "CreatedFrom" type="text" class="form-control" ng-change="change($event,'dt')" placeholder="Generated From" ng-click="open($event, 'dt')" uib-datepicker-popup ng-model="caseFilter.dateFrom" is-open="datepickers.dt" datepicker-options="dateOptionsDt" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" readonly/>
    <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>
  </div>
</div>

它应该解决问题：）

Answer 4

如果使用bootstrap 3，请使用.input-append类。像这样：

<div class="col-md-5 form-group">
        <div class="input-group">
            <label for="CreatedFrom">Created From</label>
            <div class="input-append">
                <input class="span2" id="appendedInputButton" size="16" type="text">
                <button class="btn" type="button">Go!</button>
            </div>
        </div>
    </div>

Bootstrap input-groupe

带有标签按钮的Bootstrap输入到datapicker

4 个答案: