无法将Bootstrap日期选择器定位在正确的位置

Question

我有以下HTML，我想将数据选择和提交按钮放在日期选择器之间。它只显示在页面按钮之后。

<div class="container">
       <form class="form-inline" role="form">

    <!-- *** This should show-up first *** -->
       <div class="form-group col-sm-2">
           <label label-default="label-default" for="Qty">Qty</label>
           <span class="addon glyphicon glyphicon-user"></span>
           <select class="form-control input-sm" id="Qty">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
           </select>
        </div>

  <!-- ** The Datepicker should sow up after, in the middle ***-->
        <div class="input-daterange input-group col-sm-2" id="DatePickerId">
         <input type="text" class="input-sm form-control" data-provide="datepicker" buttonClasses="glyphicon glyphicon-calendar" name="start" placeholder="Start" id="startdate"/>
           <span class="input-group-addon">
             <label for="startdate" class="glyphicon glyphicon-calendar"></label>
           </span>
           <input type="text" class="input-sm form-control" data-provide="datepicker" buttonClasses="glyphicon glyphicon-calendar" name="end" placeholder="End" id="enddate"/>
           <span class="input-group-addon">
            <label for="enddate" class="glyphicon glyphicon-calendar"></label>
           </span>
        </div>

   <!-- *** The button should show up in third *** -->

        <div class="form-group col-sm-3">
          <button class="form-control input-sm btn btn-default" id="SubmitId" data-modal-template="Submit">Submit</button>
         </div>
        </form>

但它是这样出现的：

如何以正确的顺序显示它？

Answer 1

使用此放置日历并在单独的div中提交

<div class="container">
<form class="form-inline" role="form">

   <div class="form-group col-sm-2">
      <label label-default="label-default" for="Qty">Qty</label>
      <span class="addon glyphicon glyphicon-user"></span>
      <select class="form-control input-sm" id="Qty">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
      </select>
   </div>
   <div class="col-xs-2 ">

      <div class="input-daterange input-group col-sm-2" id="DatePickerId">
         <input type="text" class="input-sm form-control" data-provide="datepicker" buttonClasses="glyphicon glyphicon-calendar" name="start" placeholder="Start" id="startdate"/>
         <span class="input-group-addon">
         <label for="startdate" class="glyphicon glyphicon-calendar"></label>
         </span>
         <input type="text" class="input-sm form-control" data-provide="datepicker" buttonClasses="glyphicon glyphicon-calendar" name="end" placeholder="End" id="enddate"/>
         <span class="input-group-addon">
         <label for="enddate" class="glyphicon glyphicon-calendar"></label>
         </span>
      </div>
   </div>
   <div class="col-xs-2 ">
      <!-- *** The button should show up in third *** -->
      <div class="form-group col-sm-3">
         <button class="form-control input-sm btn btn-default" id="SubmitId" data-modal-template="Submit">Submit</button>
      </div>
   </div>
</form>