ラベルボタンでデータピッカーへのブートストラップ入力

Question

私は、ラベル、入力、およびボタンを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> 

効果は以下のとおりです。

どのように私は1つのラインで両方のdatapickerための入力とボタンの両方を得ることができましたか？私は助けに感謝します。

Answer 1

カレンダーに使用するボタン要素全体に値としてtop:13px;を追加するだけです。

チェックアウトは、これはフィドルJS：AnswerFiddleは

Answer 2

てみてください。この

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

Answer 3

input.input-グループからラベル・タグを取得してみてください。

<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

ブートストラップ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