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>

看起来像这样：

我想把整个表格放在中心，怎么样？我需要分别居中每一行吗？另一个问题，我想要的例如，“Supllier账户”字段，与上述两个字段的长度相同，如何？

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

Answer 2

当我想这样做时，margin: 0 auto;工作得很好

如何以Bootstrap形式为中心

2 个答案: