在引导程序中居中表单不起作用 [英] Centering a form in bootstrap not working

查看：34
本文介绍了在引导程序中居中表单不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图将表单居中放置在 div 中，但我使用的方法不起作用.我尝试使用 bootstrap 文档中所述的 justify-content-center 属性，但它并未将其居中.当我尝试将它居中，但在我的 CSS 中应用 display: flex 和 justify-content: center 时，它被包裹在表单中时会失去方向并弄乱.我不知道如何将它居中，我哪里出错了.任何帮助表示赞赏.提前致谢.

.onlineRefilFormCon {显示:弹性；对齐内容:居中；对齐项目:居中；位置:绝对；顶部:50%；宽度:100%；高度:90%；}.onlineRefillTitleCon {显示:弹性；对齐内容:居中；对齐项目:居中；位置:绝对；顶部:0%；左:0%；宽度:100%；高度:10%；}.onlineRefillForm {位置:绝对；顶部:20%；宽度:40%；高度:80%；背景颜色:白色；box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}.form-group {填充顶部:5%；}.col-form-label {字体粗细:600；}.form-check-input {边框:2px 实心；}.form-control {宽度:60%；边框:2px 实心；}.textarea{保证金最高:-10%；左边距:17%；边框:2px 实心；}.radio1 {保证金最高:3%；左边距:20%；}.form-check-inline {填充:0%；}.OnlineSubmitBtnCon {位置:绝对；底部:7%；宽度:100%；高度:10%；}.OnlineSubmitBtnCon 按钮 {左边距:35%；}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script><div class="onlineRefilFormCon"><div class="onlineRefillTitleCon"><h2 class="onlineRefillTitle">在线补充</h2>

<form class="onlineRefillForm" id="onlineRefillForm"><div class="form-group row justify-content-center"><label for="text-input" class="col-2 col-form-label">名字</label><div class="col-10"><input class="form-control" type="text" value="" id="text-input">

<div class="form-group row justify-content-center"><label for="text-input" class="col-2 col-form-label">Last Name</label><div class="col-10"><input class="form-control" type="text" value="" id="text-input">

<div class="form-group row justify-content-center"><label for="date-input" class="col-2 col-form-label">日期</label><div class="col-10"><input class="form-control" type="date" value="yyyy-mm-dd" id="date-input">

<div class="form-group row justify-content-center"><label for="email-input" class="col-2 col-form-label">电子邮件</label><div class="col-10"><input class="form-control" type="email" value="" id="email-input">

<div class="form-check-inline radio1"><label class="form-check-label"><input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1"value="option1" 选中>捡起

<div class="form-check-inline"><label class="form-check-label"><input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2"值=选项2">送货

<div class="form-check-inline"><label class="form-check-label"><input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2"值=选项2">邮件

<div class="form-group justify-content-center"><label for="textarea" class="col-2 col-form-label">笔芯详情</label><textarea class="form-control textarea" rows="7" placeholder="示例:赖诺普利"></textarea>

<div class="OnlineSubmitBtnCon"><button type="button" class="btn btn-primary contactUsSubmitBtn" onclick="proccessContactMessage()">提交</button>

</表单>

解决方案

如果要使表单元素居中对齐，应使用 text-align:center 样式.因此，您应该将 text-center 引导程序类添加到要居中对齐的元素中.

它对你有用吗?

I'm trying to center my form inside a div but the methods I'm using are not working. I tried using the justify-content-center attribute as stated by the bootstrap documentation but it is not centering it. When I try to center it but applying display: flex and justify-content: center in my CSS on the box it's wrapped in the form losses its orientation and messes up. I can't figure out how to center it, where did I go wrong. Any help is appreciated. Thanks in advance.

.onlineRefilFormCon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 90%;
}

.onlineRefillTitleCon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 10%;
}

.onlineRefillForm {
  position: absolute;
  top: 20%;
  width: 40%;
  height: 80%;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.form-group {
  padding-top: 5%;
}

.col-form-label {
  font-weight: 600;
}

.form-check-input {
  border: 2px solid;
}

.form-control {
  width: 60%;
  border: 2px solid;
}

.textarea {
  margin-top: -10%;
  margin-left: 17%;
  border: 2px solid;
}

.radio1 {
  margin-top: 3%;
  margin-left: 20%;
}

.form-check-inline {
  padding: 0%;
}

.OnlineSubmitBtnCon {
  position: absolute;
  bottom: 7%;
  width: 100%;
  height: 10%;
}

.OnlineSubmitBtnCon button {
  margin-left: 35%;
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<div class="onlineRefilFormCon">
  <div class="onlineRefillTitleCon">
    <h2 class="onlineRefillTitle">Online Refill</h2>
  </div>
  <form class="onlineRefillForm" id="onlineRefillForm">
    <div class="form-group row justify-content-center">
      <label for="text-input" class="col-2 col-form-label">First Name</label>
      <div class="col-10">
        <input class="form-control" type="text" value="" id="text-input">
      </div>
    </div>
    <div class="form-group row justify-content-center">
      <label for="text-input" class="col-2 col-form-label">Last Name</label>
      <div class="col-10">
        <input class="form-control" type="text" value="" id="text-input">
      </div>
    </div>
    <div class="form-group row justify-content-center">
      <label for="date-input" class="col-2 col-form-label">Date</label>
      <div class="col-10">
        <input class="form-control" type="date" value="yyyy-mm-dd" id="date-input">
      </div>
    </div>
    <div class="form-group row justify-content-center">
      <label for="email-input" class="col-2 col-form-label">Email</label>
      <div class="col-10">
        <input class="form-control" type="email" value="" id="email-input">
      </div>
    </div>
    <div class="form-check-inline radio1">
      <label class="form-check-label">
                    <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1"
                        value="option1" checked>
                    Pickup
                </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label">
                    <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2"
                        value="option2">
                    Delivery
                </label>
    </div>
    <div class="form-check-inline">
      <label class="form-check-label">
                    <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2"
                        value="option2">
                    Mail
                </label>
    </div>
    <div class="form-group justify-content-center">
      <label for="textarea" class="col-2 col-form-label">Refill Details</label>
      <textarea class="form-control textarea" rows="7" placeholder="Example: Lisinopril"></textarea>
    </div>
    <div class="OnlineSubmitBtnCon">
      <button type="button" class="btn btn-primary contactUsSubmitBtn" onclick="proccessContactMessage()">Submit</button>
    </div>
  </form>
</div>

解决方案

If you want to align the form elements center, you should use text-align:center style. So you should add text-center bootstrap class into the elements which you want to align center.

Does it work for you?

这篇关于在引导程序中居中表单不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆