[英]Align Buttons Side by Side Bootstrap
我正在嘗試並排(水平)對齊我的兩個引導程序按鈕,現在它們一個疊一個(垂直)對齊。 我在這里發現了一些問題,但似乎仍然無法正確解決...
我將在下面發布我的代碼:
<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)使用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>
要么
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>
<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>
您可以使用帶有類btn-group
的out div。 這有助於水平對齊按鈕。 對每個按鈕div使用col-md-6
可以使按鈕未對齊,中間有不需要的空間。
<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>
試試這個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>
這對我有用
<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>
這是我與引導程序一起使用的那個!
<div class="d-flex justify-content-center">
<button class="btn btn-dark mr-2" type="submit">Procesar</button>
<button class="btn btn-danger" type="submit">Cancelar</button>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.