自舉輸入未正確對齊

Question

這是code。我想對齊右側給定的表單組。但它被扭曲了。有人能幫我嗎？

HTML：

<form id="addTransactionForm" class="form form-horizontal center-block theme-font width-500" role="form" action="." method="post"> 

    <!-- DIV --> 
    <div class="form-group form-group-sm row pull-right"> 
     <label for="created_on" class="control-label">Dated</label> 
     <div class=""> 
      <div class="input-group date pull-right" id="datepicker"> 
       <input class="form-control" type="text"> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
    </div> 
    <!-- /DIV --> 

    <br><br> 
    <!-- DIV --> 
    <div class="form-group form-group-sm"> 
     <label for="type" class="control-label col-xs-4">Type</label> 
     <div class="col-xs-8"> 
      <label class="radio-inline"><input name="optradio" type="radio">Option 1</label> 
      <label class="radio-inline"><input name="optradio" type="radio">Option 2</label> 
     </div> 
    </div> 
    <!-- /DIV --> 

    <!-- DIV --> 
    <div class="form-group form-group-sm row"> 
     <label for="amt" class="control-label col-xs-4">Amount</label> 
     <div class="col-xs-5"> 
      <input class="form-control" type="text"> 
     </div> 
    </div> 
    <!-- /DIV --> 

    <!-- /DIV --> 
    <div class="form-group form-group-sm"> 
     <label for="amt_inWords" class="control-label col-xs-4">Amount In Words</label> 
     <div class="col-xs-5"> 
      <input id="amt_inWords" class="form-control disabled" disabled="" name="amt_inWords" type="text"> 
     </div> 
    </div> 
    <!-- /DIV --> 

    <!-- DIV --> 
    <div class="form-group"> 
     <label for="amt_inWords" class="control-label col-xs-4">Description</label> 
     <div class="col-xs-5"> 
      <select class="form-control" id="sel1"> 
       <option>1</option> 
       <option>2</option> 
       <option>3</option> 
       <option>4</option> 
      </select> 
     </div> 
    </div> 
    <!-- /DIV --> 

    <!-- /DIV --> 
    <div class="form-group form-group-sm"> 
     <label for="amt_inWords" class="control-label col-xs-4">Remark</label> 
     <div class="col-xs-5"> 
      <input id="amt_inWords" class="form-control" type="text"> 
     </div> 
    </div> 
    <!-- /DIV --> 

    <!-- /DIV --> 
    <div class="form-group form-group-sm"> 
     <label for="amt_inWords" class="control-label col-xs-4">Interest</label> 
     <div class="col-xs-5"> 
      <input id="amt_inWords" class="form-control" type="text"> 
     </div> 
    </div> 
    <!-- /DIV --> 

    <!-- DIV --> 
    <div class="form-group form-group-sm"> 
     <label for="type" class="control-label col-xs-4">Type</label> 
     <div class="col-xs-8"> 
      <label class="radio-inline"><input name="optradio" type="radio">Option 1</label> 
      <label class="radio-inline"><input name="optradio" type="radio">Option 2</label> 
      <label class="radio-inline"><input name="optradio" type="radio">Option 2</label> 
     </div> 
    </div> 
    <!-- /DIV --> 

    <!-- DIV --> 
    <div class="btn-toolbar" align="center"> 
     <button type="submit" class="btn btn-primary btn-color btn-bg-color">Submit</button> 
     <button type="button" class="btn btn-danger btn-color btn-bg-color" onclick="window.close()">Close</button> 
    </div> 
    <!-- /DIV --> 

</form> 

Answer 1

固定取向：

<!-- DIV --> 
    <div class="form-group form-group-sm clearfix"> 
     <label for="fromDate" class="control-label col-xs-2 col-xs-offset-6">Dated</label> 
     <div class="col-xs-4 pull-right"> 
      <div class="input-group date" id='datepicker1'> 
       <input type="text" class="form-control"> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
    </div> 
    <!-- /DIV --> 

通過這個SO question 更新實測溶液code

Answer 2

檢查該代碼

<form id="addTransactionForm" class="form form-horizontal theme-font width-500 pull-right clearfix" role="form" action="." method="post"> 
    <!-- DIV --> 
     <div class="form-group form-group-sm row"> 
      <label for="created_on" class="control-label">Dated</label> 
      <div class=""> 
       <div class="input-group date " id="datepicker"> 
        <input type="text" class="form-control"> 
        <span class="input-group-addon"> 
         <span class="glyphicon glyphicon-calendar"></span> 
        </span> 
       </div> 
      </div> 
     </div> 
     <!-- /DIV --> 
</form> 

<form id="addTransactionForm" class="form form-horizontal center-block theme-font width-500" role="form" action="." method="post"> 


     <!-- DIV --> 
     <div class="form-group form-group-sm"> 
      <label for="type" class="control-label col-xs-4">Type</label> 
      <div class="col-xs-8"> 
       <label class="radio-inline"><input type="radio" name="optradio">Option 1</label> 
       <label class="radio-inline"><input type="radio" name="optradio">Option 2</label> 
      </div> 
     </div> 
     <!-- /DIV --> 

     <!-- DIV --> 
     <div class="form-group form-group-sm row"> 
      <label for="amt" class="control-label col-xs-4">Amount</label> 
      <div class="col-xs-5"> 
       <input type="text" class="form-control"> 
      </div> 
     </div> 
     <!-- /DIV --> 

     <!-- /DIV --> 
     <div class="form-group form-group-sm"> 
      <label for="amt_inWords" class="control-label col-xs-4">Amount In Words</label> 
      <div class="col-xs-5"> 
       <input type="text" id="amt_inWords" class="form-control disabled" disabled="" name="amt_inWords"> 
      </div> 
     </div> 
     <!-- /DIV --> 

     <!-- DIV --> 
     <div class="form-group"> 
      <label for="amt_inWords" class="control-label col-xs-4">Description</label> 
      <div class="col-xs-5"> 
       <select class="form-control" id="sel1"> 
        <option>1</option> 
        <option>2</option> 
        <option>3</option> 
        <option>4</option> 
       </select> 
      </div> 
     </div> 
     <!-- /DIV --> 

     <!-- /DIV --> 
     <div class="form-group form-group-sm"> 
      <label for="amt_inWords" class="control-label col-xs-4">Remark</label> 
      <div class="col-xs-5"> 
       <input type="text" id="amt_inWords" class="form-control"> 
      </div> 
     </div> 
     <!-- /DIV --> 

     <!-- /DIV --> 
     <div class="form-group form-group-sm"> 
      <label for="amt_inWords" class="control-label col-xs-4">Interest</label> 
      <div class="col-xs-5"> 
       <input type="text" id="amt_inWords" class="form-control"> 
      </div> 
     </div> 
     <!-- /DIV --> 

     <!-- DIV --> 
     <div class="form-group form-group-sm"> 
      <label for="type" class="control-label col-xs-4">Type</label> 
      <div class="col-xs-8"> 
       <label class="radio-inline"><input type="radio" name="optradio">Option 1</label> 
       <label class="radio-inline"><input type="radio" name="optradio">Option 2</label> 
       <label class="radio-inline"><input type="radio" name="optradio">Option 2</label> 
      </div> 
     </div> 
     <!-- /DIV --> 

     <!-- DIV --> 
     <div class="btn-toolbar" align="middle"> 
      <button type="submit" class="btn btn-primary btn-color btn-bg-color">Submit</button> 
      <button type="button" class="btn btn-danger btn-color btn-bg-color" onclick="window.close()">Close</button> 
     </div> 
     <!-- /DIV --> 

    </form>