并排对齐按钮 Bootstrap

Question

我正在尝试并排（水平）对齐我的两个引导程序按钮，现在它们一个叠一个（垂直）对齐。我在这里发现了一些问题，但似乎仍然无法正确解决…

我将在下面发布我的代码：

 <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>

原文由 codeBoy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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>

原文由 Dmitriy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

<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>

原文由 hafiz ali 发布，翻译遵循 CC BY-SA 3.0 许可协议