css - 如何在卡内创建按钮？

Question

我在设计网站时遇到了很多困难。我正在使用 Bootstrap 创建卡片。

我正在使用以下代码创建卡片:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mb-2"> 
  <div class="col-md-12">
    <div class="card flex-md-row mb-4 box-shadow h-md-250">
      <div class="card-body d-flex flex-column align-items-start">                               
        <h3 class="card-title">Special title treatment</h3>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a> 
      </div>
    </div>
  </div>
</div>

在此卡片中，我想在与 <h3> 相同的行中生成 [close] 按钮标签。你能帮忙解决这个问题吗？我尝试了很多方法，但我无法弄明白。

得到答案后，我用以下代码将按钮更改为图标。

<div class="row mb-2"> 
  <div class="col-md-12">
    <div class="card flex-md-row mb-4 box-shadow h-md-250">
      <div class="card-body d-flex flex-column align-items-start">                               
        <h3 class="card-title d-flex justify-content-between w-100">
            Special title treatment 
            <button type="button" class="close" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
            </button>
        </h3>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a> 
      </div>
    </div>
  </div>
</div>

关闭图标位于行的底部。如何将关闭图标放在行首？

Answer 1

您可以使用以下解决方案之一:

解决方案 #1(按钮左对齐 - 在 <h3> 的文本之后):

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mb-2"> 
  <div class="col-md-12">
    <div class="card flex-md-row mb-4 box-shadow h-md-250">
      <div class="card-body d-flex flex-column align-items-start">                               
        <h3 class="card-title d-flex">Special title treatment <a class="btn btn-sm btn-danger ml-3" href="#">Close</a></h3>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a> 
      </div>
    </div>
  </div>
</div>

解决方案#2(右侧按钮):

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mb-2"> 
  <div class="col-md-12">
    <div class="card flex-md-row mb-4 box-shadow h-md-250">
      <div class="card-body d-flex flex-column align-items-start">                               
        <h3 class="card-title d-flex justify-content-between w-100">Special title treatment <a class="btn btn-sm btn-danger" href="#">Close</a></h3>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a> 
      </div>
    </div>
  </div>
</div>