Разбиение аддонов входной группы Bootstrap

Question

При попытке сделать мой сайт мобильным-отзывчивым, я столкнулся с проблемой, что аддон группы входных данных разбивается на текстовое поле. Я ответил на вопрос this. Но я не использовал никаких col-md -....s или col-xs -.... здесь.

Мой код:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="bottom_section_vide" class="well"> 
 
    <div id="date_container_panel" align="center"> 
 
    <div id="date_container" class="panel-body"> 
 
     <form id="date_form" role="form" class="form-inline row"> 
 
     <div class="form-group"> 
 
      <div class="input-group"> 
 
      <input class="form-control" id="checkin_field" type="text" placeholder="Check In" aria-describedby="basic-addon2" /> 
 
      <i class="input-group-addon" id="basic-addon2"><i class="glyphicon glyphicon-calendar btn-link" id="chin_cla"></i></i> 
 
      </div> 
 
     </div>&emsp;&emsp; 
 
     <div class="form-group"> 
 
      <div class="input-group"> 
 
      <input class="form-control" id="checkout_field" type="text" placeholder="Check Out" aria-describedby="basic-addon3" disabled /> 
 
      <i class="input-group-addon" id="basic-addon3"><i class="glyphicon glyphicon-calendar btn-link" id="chout_cla"></i></i> 
 
      </div> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

Мой выход:

enter image description here

Answer 1

дают определенную ширину контейнера элементов.

#date_container{ 
    width : <value>px; 
    }