Не удалось найти, как позиционировать календарь с помощью bootstrap-datetimepicker

Question

Я пытаюсь создать форму с помощью bootstrap-datetimepicker для выбора дат, а при использовании в форме начальной загрузки календарь не помещается правильно в текстовое поле, равно как и значок календаря - только маленький значок рядом с текстовым полем, как если бы я просто сделал простой datetimepicker, как в уроке this. Я изо всех сил пытаюсь найти решение для этого. Если кто-то может помочь, я бы очень признателен!

<div class="container-fluid"> 
      <div class="page-header"> 
       <h1>Rental Car Agreement</h1> 
       <img src="../chris_cole"> 
      </div> 
      <section> 
       <form class="form-horizontal" role="form"> 
        <fieldset> 
         <legend>Personal Information:</legend> 
         <div class="form-group"> 
          <label class="control-label col-sm-2" for="firstName">First Name:</label> 
           <div class="col-sm-10"> 
            <input type="text" class="form-control" id="firstName" placeholder="Enter first name"> 
           </div> 
         </div> 
         <div class="form-group"> 
          <label class="control-label col-sm-2" for="lastName">Last Name:</label> 
           <div class="col-sm-10"> 
            <input type="text" class="form-control" id="lastName" placeholder="Enter last name"> 
           </div> 
         </div> 
         <div class="form-group"> 
          <label class="control-label col-sm-2" for="address">Street Address:</label> 
           <div class="col-sm-10"> 
            <input type="text" class="form-control" id="address" placeholder="Enter address"> 
           </div> 
         </div> 
         <div class="form-group"> 
          <label class="control-label col-sm-2" for="city">City:</label> 
           <div class="col-sm-10"> 
            <input type="text" class="form-control" id="city" placeholder="Enter city"> 
           </div> 
         </div> 
         <div class="form-group"> 
          <label class="control-label col-sm-2" for="state">State:</label> 
           <div class="col-sm-10"> 
            <input type="text" class="form-control" id="state" placeholder="Enter state"> 
           </div> 
         </div> 
         <div class="form-group"> 
          <label class="control-label col-sm-2" for="zip">Zip Code:</label> 
           <div class="col-sm-10"> 
            <input type="text" class="form-control" id="zip" placeholder="Enter zip code"> 
           </div> 
         </div> 
         <div class="form-group"> 
          <label class="control-label col-sm-2" for="phone">Phone Number:</label> 
           <div class="col-sm-10"> 
            <input type="text" class="form-control" id="phone" placeholder="Enter phone number"> 
           </div> 
         </div> 
         <div class="form-group"> 
          <label class="control-label col-sm-2" for="email">Email:</label> 
           <div class="col-sm-10"> 
            <input type="text" class="form-control" id="email" placeholder="Enter email"> 
           </div> 
         </div> 
        </fieldset> 
        <fieldset> 
         <legend>Other Information:</legend> 
         <div class="form-group input-group date" id="datetimepicker1"> 
          <label class="control-label col-sm-2" for="startDate">Start Date:</label> 
          <div class="col-sm-10"> 
           <input type="text" class="form-control" id="startDate"> 
           <span class="input-group-addon"> 
            <span class="glyphicon glyphicon-calendar"></span> 
           </span> 
          </div> 
         </div> 
         <script type="text/javascript"> 
          $(function() { 
           $('#datetimepicker1').datetimepicker(); 
          }); 
         </script> 
        </fieldset> 
       </form> 
      </section> 
     </div> 

Answer 1

Ваш нестинг input-group класса неверен. Вы не должны смешивать группы групп или классы столбцов сетки непосредственно с группами ввода. Вместо этого вставьте группу ввода внутри группы формы или элемента, связанного с сеткой. http://getbootstrap.com/components/#input-groups

<div class="col-sm-10"> 
    <div class="input-group date" id="datetimepicker1"> 
    <input type="text" class="form-control" id="startDate"> 
    <span class="input-group-addon"> 
    <span class="glyphicon glyphicon-calendar"></span> 
    </span> 
    </div> 
</div>