并排对齐按钮 Bootstrap

Posted 2023-03-05

【中文标题】并排对齐按钮 Bootstrap

【英文标题】：Align Buttons Side by Side Bootstrap

【发布时间】：2015-09-07 04:24:27

【问题描述】：

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

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

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

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

【参考方案2】：

这对我有用

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

【参考方案3】：

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>

【参考方案4】：

您可以使用带有 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>

【讨论】：

如何添加水平间距？

请检查小提琴：- jsfiddle.net/samsonthekkekara/vnwvfssm/9

【参考方案5】：

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