我有一张 bootstrap 4 卡，我想将 h3 和 input-group 彼此对齐。
我试过将 float-right 添加到 input-group 中，但没有用。我也尝试制作 h3 和 input-group inline-block 但它仍然不起作用。PS我使用内联样式表。
<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>
<!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-*-*