Html 并排对齐按钮 Bootstrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30967737/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align Buttons Side by Side Bootstrap
提问by codeBoy
I am trying to align my two bootstrap buttons side by side (horizontally), right now they are aligned one on top of another (vertically). I have found a few questions on here, but still can't seem to get it right...
我试图将我的两个引导按钮并排（水平）对齐，现在它们一个一个（垂直）对齐。我在这里发现了一些问题，但似乎仍然无法正确回答......
I will post my code below:
我将在下面发布我的代码：
<div class="row">
<div class="col-sm-12">
<asp:Button ID="btnSearch" runat="server" Text="Search" CssClass="btn btn-primary btn-md center-block" Style="width: 100px; margin-bottom: 10px;" OnClick="btnSearch_Click" />
<asp:Button ID="btnClear" runat="server" Text="Clear" CssClass="btn btn-danger btn-md center-block" Style="width: 100px;" OnClick="btnClear_Click" />
</div>
</div>
回答by Dmitriy
1) use display: inline-block
1) 使用 display: inline-block
#btnSearch,
#btnClear{
display: inline-block;
vertical-align: top;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-12 text-center">
<button id="btnSearch" class="btn btn-primary btn-md center-block" Style="width: 100px;" OnClick="btnSearch_Click" >button</button>
<button id="btnClear" class="btn btn-danger btn-md center-block" Style="width: 100px;" OnClick="btnClear_Click" >button</button>
</div>
</div>or
或者
2) remove class .center-block
2）删除类 .center-block
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-12 text-center">
<button class="btn btn-primary btn-md">button</button>
<button class="btn btn-danger btn-md">button</button>
</div>
</div>回答by Hafiz ally lalani
<div class="container">
<div class="row">
<div class="col-xs-6">
<button class="btn btn-warning btn-block">Talent-signup to find jobs</button>
</div>
<div class="col-xs-6">
<button class="btn btn-success btn-block">Employers- signup to hire talent</button>
</div>
</div>
回答by Samson Thomas
You can use an out div with a class btn-group. This helps to align the buttons horizontally. Using col-md-6for each button div can make the buttons missaligned with unwanted space in between.
您可以将 out div 与 class 一起使用btn-group。这有助于水平对齐按钮。使用col-md-6每个按钮的div可以在两者之间不必要的空间missaligned的按钮。
<div class="btn-group">
<a href="#" class="btn btn-warning">Talent-signup to find jobs</a>
<a href="#" class="btn btn-success">Talent-signup to find jobs</a>
</div>
回答by Vaishnavi
Try this for Bootstrap 4.Worked for me
试试这个 Bootstrap 4.为我工作
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
</div>
回答by Vedha Peri
This worked for me
这对我有用
<div class="container">
<div class="row">
<div class="col">
<button class="btn btn-danger form-control btn-block" routerLink='/login'>Cancel</button></div>
<div class="col">
<button id="btnSubmit" class="btn btn-primary form-control btn-block" type="submit" (click)="onSubmit()">Submit</button></div>
</div>
</div>
