Question

我是前端的新手。...我想将表单居中。

我只是通过使用。

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

那么有什么办法可以使此表格居中。这是引导4.1.0

我可以在引导文档中看到“ 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>

Answer 2

我的方法如下。请注意，此代码是最低要求。第一格的行为就像身体。如果您想居中放置某项内容，则可以添加另一个标签，例如form或div并按照自己的意愿进行操作。

使用CSS：

html, body, #myContainer {
  height: 100%;
}

<html>
    <body>
        <div id="myContainer" class="d-flex align-items-center justify-content-center">
            <form>
                content here
            </form>
        </div>
    </body>
</html>

没有CSS：

<html class="h-100">
    <body class="h-100">
        <div class="d-flex h-100 align-items-center justify-content-center">
            <form>
                content here
            </form>
        </div>
    </body>
</html>

Answer 3

如果要以中心为中心，请使用.ml-auto, .mr-auto引导程序类。

Answer 4

div.form
{
    display: block;
    text-align: center;
}
form
{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

<div class="form">
    <form name="Form1">
        ...
    </form>
</div>

Answer 5

如果您正在使用引导程序，则添加此引导程序类，使您的表单居中：

d-flex flex-wrap align-content-center-text-center

如何在Bootstrap 4.1中居中放置表单

5 个答案:

使用CSS：

没有CSS：