logo标签列表

如何在Bootstrap卡片标题中右对齐？

csstwitter-bootstrapbootstrap-4
3

我有一个 Bootstrap 4 的卡片，我想让 h3 和 input-group 并排对齐。

我已经尝试给 input-group 添加 float-right，但没有效果。我还尝试将 h3 和 input-group 设为 inline-block，但仍然不起作用。 P.S. 我使用了内联样式表。

<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>
3个回答
6

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

1
只需在你的类之前添加一个类。因为你使用了和，它会在元素的左右两侧添加15px的填充。通过添加类，您将在之前添加负边距，这将使您的与

对齐。
<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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接