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

检查此代码

 <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>

Answer 2

修正了对齐方式：

    <!-- 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

Bootstrap输入未正确对齐

2 个答案: