html - 如何在 bootstrap 4.1 中将表单居中

Question

我是前端新手....我想居中表格。

我只是用 .

但是我的领导告诉我这不是正确的做法。

那么有没有办法让这个表格居中呢。这是 bootstap 4.1.0

我可以在 Bootstrap 文档中看到用于间距的“mx-auto”。但在这种情况下也行不通。

所以我很困惑该怎么做。我只想将表格对齐到中型和大型设备的中心。无需以移动设备为中心。

谢谢

        <form method="post" id="new_regform">
            {% csrf_token %}

            <div class="row R1">
                <div class="col-sm-12 col-md-4" >
                    <div class="form-group">
                        <label for="{{ form.name.id_for_label }}" class="text-capitalize font-weight-bold">{{ form.name.label|title }}{% if form.name.field.required %}<span class="text-danger">*</span>{% endif %}</label>
                        {{ form.name|add_class:'form-control' }}
                        <span class="form-text text-danger">{{form.errors}}</span>
                    </div>
                </div>
                <div class="col-sm-12 col-md-4">
                    <div class="form-group">
                        <label for="{{ form.category.id_for_label }}" class="text-capitalize font-weight-bold">{{ form.category.label|title }}{% if form.category.field.required %}<span class="text-danger">*</span>{% endif %}</label>
                        {{ form.caegory|add_class:'form-control' }}
                        <span class="form-text text-danger">{{form.category.errors}}</span>
                    </div>
                </div>
                <div class="col-sm-12 col-md-4">
                    <div class="form-group">
                        <label for="{{ form.Owner.id_for_label }}" class="text-capitalize font-weight-bold">{{ form.Owner.label|title }}{% if form.Owner.field.required %}<span class="text-danger">*</span>{% endif %}</label>
                        {{ form.Owner|add_class:'form-control' }}
                        <span class="form-text text-danger">{{ form.Owner.errors }}</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <label for="{{ form.Description.id_for_label }}" class="text-capitalize font-weight-bold">{{ form.Description.label|title }}{% if form.Description.field.required %}<span class="text-danger">*</span>{% endif %}</label>
                        {{ form.Description|add_class:'form-control' }}
                        <span class="form-text text-danger">{{form.Description.errors}}</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 col-md-4">
                    <div class="form-group">
                        <label for="{{ form.Identitiy.id_for_label }}" class="text-capitalize font-weight-bold">{{ form.Identity.label|title }}{% if form.Identity.field.required %}<span class="text-danger">*</span>{% endif %}</label>
                        {{ form.Identity|add_class:'form-control' }}
                        <span class="form-text text-danger">{{form.Identity.errors}}</span>
                    </div>
                </div>
                <div class="col-sm-12 col-md-4">
                    <div class="form-group">
                        <label for="{{ form.Guardian.id_for_label }}" class="text-capitalize font-weight-bold">{{ form.Guardian.label|title }}{% if form.Guardian.field.required %}<span class="text-danger">*</span>{% endif %}</label>
                        {{ form.Guardian|add_class:'form-control' }}
                        <span class="form-text text-danger">{{ form.Guardian.errors }}</span>
                    </div>

                </div>
                <div class="col-sm-12 col-md-4">
                    <div class="form-group">
                        <label for="{{ form.Hobby.id_for_label }}" class="text-capitalize font-weight-bold">{{ form.Hobby.label|title }}{% if form.Hobby.field.required %}<span class="text-danger">*</span>{% endif %}</label>
                        {{ form.Hobby|add_class:'form-control' }}
                        <span class="form-text text-danger">{{ form.Hobby.errors }}</span>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="card border-0">
                    <div class="card-body">
                        <div class="col-12 pull-right text-right">
                            <button class="btn btn-primary text-capitalize font-weight-bold mr-2 Create" type="submit">Submit</button>
                            <a href="#">Cancel</a>
                        </div>
                    </div>
                </div>
            </div>
        </form>

Answer 1

这可能是一种解决方法，但我以前做的是，将整个布局分为三列，并将要居中的内容包含在中间列中，就像这样。

<div class="row">
    <div class="col-sm-2">&nbsp;</div>
    <div class="col-sm-8">
        <form>
           <!-- Your Code -->
        </form>
    </div>
    <div class="col-sm-2">&nbsp;</div>
</div>