css - 如何使 Bootstrap 表单居中

Question

我有这个表格:

<form style="margin-top:20px">

            <div class="row form-group">
                <div class="col-lg-3">
                    <label for="exampleInputEmail1">Original Amount</label>
                    <div class="input-group">
                        <div class="input-group-addon" id="OriginalAmountAddon">$</div>
                        <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
                    </div>
                </div>

                <div class="col-lg-3">
                    <label for="exampleInputEmail1">Billing Amount</label>
                    <div class="input-group">
                        <div class="input-group-addon" id="BillingAmountAddon">$</div>
                        <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
                    </div>
                </div>
            </div>

            <div class="row form-group">
                <div class="col-lg-3">
                    <label for="exampleInputEmail1">Original Currency Code</label>
                    <div class="input-group">
                        <div class="input-group-addon" id="OriginalCurrencyAddon">$</div>
                        <select class="form-control" id="OriginalCurrencySelect">
                            <option value="$">USD</option>
                            <option value="€">EUR</option>
                            <option value="£">GBP</option>
                            <option value="₪">ILS</option>
                        </select>
                    </div>
                </div>

                <div class="col-lg-3">
                    <label for="exampleInputEmail1">Billing Currency Code</label>
                    <div class="input-group">
                        <div class="input-group-addon" id="BillingCurrencyAddon">$</div>
                        <select class="form-control" id="BillingCurrencySelect">
                            <option value="$">USD</option>
                            <option value="€">EUR</option>
                            <option value="£">GBP</option>
                            <option value="₪">ILS</option>
                        </select>
                    </div>
                </div>
            </div></form>

看起来像这样:

我想让整个表格居中，怎么办？我需要分别将每一行居中吗？还有一个问题，例如，我希望“Suppllier Account”字段与上面两个字段的长度相同，如何实现？

Answer 1

这基本上是一个已经被问过很多次的问题的重复..

Center a column using Twitter Bootstrap 3

要特别居中您的表单，您可以使用 column offsets像这样，但是有几种不同的居中方法:

<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-offset-3 col-sm-10 col-sm-offset-1">
            <form style="margin-top:20px">
                <div class="row form-group">
                    <div class="col-md-4">
                        <label for="exampleInputEmail1">Original Amount</label>
                        <div class="input-group">
                            <div class="input-group-addon" id="OriginalAmountAddon">$</div>
                            <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label for="exampleInputEmail1">Billing Amount</label>
                        <div class="input-group">
                            <div class="input-group-addon" id="BillingAmountAddon">$</div>
                            <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
                        </div>
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-4">
                        <label for="exampleInputEmail1">Original Currency Code</label>
                        <div class="input-group">
                            <div class="input-group-addon" id="OriginalCurrencyAddon">$</div>
                            <select class="form-control" id="OriginalCurrencySelect">
                                <option value="$">USD</option>
                                <option value="€">EUR</option>
                                <option value="£">GBP</option>
                                <option value="₪">ILS</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label for="exampleInputEmail1">Billing Currency Code</label>
                        <div class="input-group">
                            <div class="input-group-addon" id="BillingCurrencyAddon">$</div>
                            <select class="form-control" id="BillingCurrencySelect">
                                <option value="$">USD</option>
                                <option value="€">EUR</option>
                                <option value="£">GBP</option>
                                <option value="₪">ILS</option>
                            </select>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

http://www.codeply.com/go/sRbuCfloDX