Html 引导-在表单组中水平居中输入组

我无法在表单中集中输入组。任何帮助都将不胜感激。我最好的猜测是它与输入组div有关，而不是像预期的那样与表单组交互。标题和按钮居中，而不是输入，如下面的代码笔所示。谢谢

代码笔：

修改密码






修改密码

修改密码






修改密码

您可以试试这个

我引用了你的一些源代码。有些样式代码是不同的。专注于将

输入

标记居中，而不是像

边框

这样的属性

-HTML-

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8 col-sm-8 col-xs-8">
      <form>
        <h4>Change password</h4>
        <div class="input-group">
          <div class="input-group-prepend">
            <span id="inputGroupPrepend2" class="input-group-text">
              <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-key" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z"/>
                  <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                </svg>
            </span>
            <input type="password" name="passwords[old]" placeholder="Current Password" required/>
          </div>
        </div>
        <div class="input-group">
          <div class="input-group-prepend">
            <span id="inputGroupPrepend2" class="input-group-text">
              <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-key" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z"/>
                 <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                </svg>
            </span>
            <input type="password" name="passwords[new]" placeholder="New Password" required/>
          </div>
        </div>
        <button class="btn primary-btn">Change Password</button>
      </form>
    </div>
  </div>
</div>

form, h4 {
   text-align: center;
}

h4 {
   margin-bottom: 50px;
}

.row, .input-group {
   justify-content: center;
}

.input-group {
   display: flex;
   margin-bottom: 25px;
}

-结果-

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8 col-sm-8 col-xs-8">
      <form>
        <h4>Change password</h4>
        <div class="input-group">
          <div class="input-group-prepend">
            <span id="inputGroupPrepend2" class="input-group-text">
              <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-key" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z"/>
                  <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                </svg>
            </span>
            <input type="password" name="passwords[old]" placeholder="Current Password" required/>
          </div>
        </div>
        <div class="input-group">
          <div class="input-group-prepend">
            <span id="inputGroupPrepend2" class="input-group-text">
              <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-key" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z"/>
                 <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                </svg>
            </span>
            <input type="password" name="passwords[new]" placeholder="New Password" required/>
          </div>
        </div>
        <button class="btn primary-btn">Change Password</button>
      </form>
    </div>
  </div>
</div>

form, h4 {
   text-align: center;
}

h4 {
   margin-bottom: 50px;
}

.row, .input-group {
   justify-content: center;
}

.input-group {
   display: flex;
   margin-bottom: 25px;
}

---

嗨@abdulrahman！请考虑通过对您更改的内容添加一些说明来改进您的答案，以及为什么。我只是在Bootstrap中添加了CaseCenter内容中心来制作任何标签。center@Abdulrahman嗨，我看到你的代码了。但是当我运行代码时，它现在似乎卡在左边了。我认为需要解决这个问题。我的答案和他的答案是一样的，但我使用的是引导类，但他从零开始纠正它为什么？它已经在bootstrapsee此页面中