J'essaie d'aligner mes deux boutons d'amorçage côte à côte (horizontalement). Pour l'instant, ils sont alignés les uns sur les autres (verticalement). J'ai trouvé quelques questions ici, mais je n'arrive toujours pas à comprendre. ...
Je posterai mon code ci-dessous:
<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>
1) utilisez 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>
ou
2) supprimer la classe .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>
<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>
Vous pouvez utiliser un div avec une classe btn-group
. Cela aide à aligner les boutons horizontalement. En utilisant col-md-6
pour chaque bouton, les boutons peuvent être mal alignés avec un espace non désiré entre eux.
<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>
Cela a fonctionné pour moi
<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>