并排对齐按钮 [英] Align Buttons Side by Side Bootstrap
本文介绍了并排对齐按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图将我的两个自举按钮并排(水平)对齐,现在它们在一个(另一个)顶部(垂直)对齐。我在这里发现了一些问题,但似乎仍然无法正确解决...
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>
推荐答案
1)使用显示:内联块
#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>
这篇关于并排对齐按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文