这是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>
答案 0 :(得分：0)
检查此代码
<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>
答案 1 :(得分：0)
修正了对齐方式：
<!-- 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