无法在表单中对齐引导程序提交按钮？
[英]Cannot align bootstrap submit button in form?
问题描述
I have used bootstrap form but submit button is not getting aligned below Name and Number field in form. 
我使用了引导表单，但是提交按钮在表单的“名称”和“数字”字段下方未对齐。 I tried to use various css styles but could not align it. 我尝试使用各种CSS样式，但无法将其对齐。 See screenshot submit button is not aligned properly. 请参阅屏幕截图，提交按钮未正确对齐。
In app.js: 在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>
`;
}
In index.css: 在index.css中：
.form-group{
padding-left: 30px;
padding-right: 30px;
}
.form .btn-primary{
padding-left: 30px;
}
I also tried to wrap submit button inside div tag but still no effect. 我也尝试将提交按钮包装在div标签内，但仍然没有效果。
3 个解决方案
解决方案1
3 已采纳 2018-02-06 14:01:57
form .btn-primary{
margin-left: 30px;
}
not .form this should also be margin otherwise the text would be shifted 30 pixels but the button remain in the same place 不是.form这也应该是空白，否则文本将被移动30像素，但按钮将保留在同一位置
解决方案2
0 2018-02-06 14:16:24
Instead of adding padding to .form-group and .btn what you can do is add padding to the form itself, just add a class to the form and add css against it. 与其在.form-group和.btn中添加填充， .btn如在表单本身中添加填充，而只是向该表单中添加一个类，并针对该表单添加CSS。
Working example - 工作示例-
function editContact(id) { document.getElementById("editcontact").innerHTML = ` <form class="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> `; } editContact(1);
.form{ padding: 0 30px; }
<!DOCTYPE html> <html> <head> <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> </head> <body> <h1>Hello Plunker!</h1> <div id="editcontact"> </div> </body> </html>
Notice, I added .form class, and adding to it. 注意，我添加了.form类，并将其添加到其中。 Here is a plunker of the above snippet https://plnkr.co/edit/R2ku3opNtn3KsBDYKYr3?p=preview 这是上面代码片段的小插曲https://plnkr.co/edit/R2ku3opNtn3KsBDYKYr3?p=preview
解决方案3
-1 2018-02-06 14:02:25
wrap button inside form-group div (new ) PS try this snippet in expanded snippet view 在form-group div（新的）中包装按钮PS在扩展的片段视图中尝试此片段
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <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> <div class="form-group"> <button type="submit" class="btn btn-primary">Submit</button> </div> </form>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.