Выровнять кнопки бок о бок 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> 

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

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> 

Answer 3

Вы можете использовать div с классом btn-group. Это помогает выровнять кнопки по горизонтали. Использование col-md-6 для каждой кнопки div может сделать кнопки пропущенными с нежелательным промежутком между ними.

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