javascript - 无法在表单中对齐 Bootstrap 提交按钮？

Question

我使用了 Bootstrap 表单，但提交按钮没有在表单中的名称和数字字段下方对齐。我尝试使用各种 css 样式，但无法对齐。请参阅屏幕截图提交按钮未正确对齐。

在 app.js 中:

    function editContact(id) {
    document.getElementById("search").style.display = 'none';
    document.getElementById("contactlist").style.display = 'none';
    document.getElementById("editcontact").style.display = '';
    document.getElementById("editcontact").innerHTML = 
        `
        <form>
          <div class="form-group">
            <label for="InputName">Name</label>
            <input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
          </div>
          <div class="form-group">
            <label for="InputNumber">Number</label>
            <input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
          </div>
          <div class="form-group">
            <label for="InputGroup">Group</label>
            <input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
        `;
}

在 index.css 中:

.form-group{
    padding-left: 30px;
    padding-right: 30px;
}

.form .btn-primary{
    padding-left: 30px;
}

我也尝试将提交按钮包裹在 div 标签中，但仍然没有效果。

Answer 1

form .btn-primary{
    margin-left: 30px;
}

不是 .form 这也应该是边距，否则文本将移动 30 像素但按钮保持在同一个位置