我是前端新手....我想居中表格。
我只是用 .
但是我的领导告诉我这不是正确的做法。
那么有没有办法让这个表格居中呢。 这是 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>
最佳答案
这可能是一种解决方法,但我以前做的是,将整个布局分为三列,并将要居中的内容包含在中间列中,就像这样。
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-8">
<form>
<!-- Your Code -->
</form>
</div>
<div class="col-sm-2"> </div>
</div>
关于html - 如何在 bootstrap 4.1 中将表单居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58687618/