Ввод данных слишком широк в хроме

Question

Im с использованием входов Bootstrap и даты. С Firefox, когда экран становится суше, размер ввода даты изменяется. Однако с Chrome они не изменяются и становятся слишком широкими.

http://www.bootply.com/rgbzpIazj9

<div class="row"> 

          <div class="col-sm-6"> 
           <div class="form-group form-group-default-new"> 
            <label>Start</label> 
            <div class="input-group"> 
             <div class="input-group-addon"> 
              <span class="glyphicon glyphicon-calendar"></span> 
             </div> 
             <input type="date" class="form-control form-control-default-grey-new" placeholder="Ideal start date"> 
            </div> 
           </div>  
          </div> 

          <div class="col-sm-6"> 
           <div class="form-group form-group-default-new"> 
            <label>Duration</label> 
            <div class="input-group"> 
             <div class="input-group-addon"> 
              <span class="glyphicon glyphicon-calendar"></span> 
             </div> 
             <input type="date" class="form-control form-control-default-grey-new" placeholder="Duration"> 
            </div>  
           </div> 
          </div> 

         </div> 

Answer 1

Просто уменьшить ширину, как пример кода ниже:

.input-group .form-control { 
    width: 74%; 
} 

Answer 2

Его прекрасно работать на моем браузере Chrome. Вы также должны использовать другие классы, такие как .lg, .md и .xs, чтобы при появлении определенной ширины окна браузера это отображение выглядело в соответствии с системой начальной загрузки.