Кнопка отображения на одной и той же строке ввода текста

Question

Я использую DatePicker из UI Bootstrap таким образом:

<div class="form-group"> 
    <label class="col-lg-3 control-label">Birth Date:</label> 
    <div class="col-lg-8"> 
     <input type="text" 
       class="form-control" 
       datepicker-popup="MMMM dd, yyyy" 
       ng-model="panels.patient.birthDate" 
       is-open="pdfc.opened" 
       ng-required="true" 
       close-text="Close" /> 
     <span class="input-group-btn"> 
      <button type="button" class="btn btn-default" ng-click="pdfc.open()"><i class="glyphicon glyphicon-calendar"></i></button> 
     </span> 
    </div> 
</div> 

Кнопка отображается в новой строке, как если бы там был <br />. Есть ли способ отобразить кнопку в той же строке <input />, как это происходит в these examples?

Answer 1

Набор input-group вместо form-group

HTML

<label class="col-lg-3 control-label">Birth Date:</label> 
    <div class="col-lg-8"> 
    <div class="input-group"> 
     <input type="text" 
       class="form-control" 
       datepicker-popup="MMMM dd, yyyy" 
       ng-model="panels.patient.birthDate" 
       is-open="pdfc.opened" 
       ng-required="true" 
       close-text="Close" /> 
     <span class="input-group-btn"> 
     <button type="button" class="btn btn-default" ng-click="pdfc.open()"><i class="glyphicon glyphicon-calendar"></i></button> 
     </span> 
    </div> 

DEMO HERE

Answer 2

Просто установите отображение входа в 'встроенный блок'

CSS:

.form-group input { 
    display: inline-block; 
}