我使用了 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
标签中,但仍然没有效果。
最佳答案
form .btn-primary{
margin-left: 30px;
}
不是 .form 这也应该是边距,否则文本将移动 30 像素但按钮保持在同一个位置
关于javascript - 无法在表单中对齐 Bootstrap 提交按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48644781/