我如何在引导卡标题中对齐答案

【问题标题】：How do i align right in bootstrap card header我如何在引导卡标题中对齐
【发布时间】：2026-02-04 10:45:01
【问题描述】：

我有一张 bootstrap 4 卡，我想将 h3 和 input-group 并排对齐。

我尝试将 float-right 添加到输入组，但没有奏效。我也尝试过制作 h3 和 input-group 内联块，但它仍然不起作用。附言我使用了内联样式表。

<div class="card-header">
    <h3 class="card-title" style="inline-block">Product List</h3>
    <div class="input-group input-group-sm col-sm-3" style="inline-block">
    <input type="text" class="form-control">
    <div class="input-group-append">
        <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
    </div>
    </div>
</div>

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
  <section class="card-header">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-6">
          <h3 class="card-title" style="inline-block">Product List</h3>
        </div>
        <div class="col-sm-6">
          <div class="input-group input-group-sm" style="inline-block">
            <input type="text" class="form-control">
            <div class="input-group-append">
              <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>
</html>

只需在该部分保留.card-header，并将title 和.input-group 包装成.row > .col-*-*

【讨论】：

【解决方案2】：

希望这对你有帮助。

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />

<div class="card-header d-flex align-items-center">
    <h3 class="card-title">Product List</h3>
    <div class="input-group input-group-sm col-sm-3 ml-auto">
    <input type="text" class="form-control">
    <div class="input-group-append">
        <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
    </div>
    </div>
</div>

【讨论】：

【解决方案3】：

只需在 input-group 类之前添加一个 row 类。因为您使用了col-sm-3 和input-group，它在元素的左侧和右侧添加了15px 的填充。通过添加row 类，您将在输入组之前添加负边距，它将使您的输入组与h3 对齐。

<div class="card-header">
    <h3 class="card-title" style="inline-block">Product List</h3>
    <div class="row">
        <div class="input-group input-group-sm col-sm-3" style="inline-block">
            <input type="text" class="form-control">
            <div class="input-group-append">
                <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
            </div>
        </div>
    </div>
</div>

【讨论】：