如何以Bootstrap形式为中心

时间:2017-03-06 21:11:29

标签: css twitter-bootstrap

我有这样的表格:

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

看起来像这样:

enter image description here

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

2 个答案:

答案 0 :(得分:0)

这基本上是一个已被多次询问过的问题的副本。

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

答案 1 :(得分:0)

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