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>标记的同一行生成[关闭]按钮。你能帮忙吗？我尝试了很多方法，但我无法弄明白。

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

<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>的文字后面）：

＆＃13;

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

＆＃13;

解决方案＃2（右侧按钮）：

＆＃13;

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

＆＃13;

Answer 2

如果你引用了Bootstrap close icon，它会使用右移，所以只需将其放在h2标记中，然后使用w-100使h2满宽度..

https://www.codeply.com/go/pm3smAGdUk

<div class="container">
    <div class="row mb-2">
        <div class="col-md-6">
            <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 w-100">
                        Special title treatment
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                             <span aria-hidden="true">×</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>
</div>

如何在卡内创建按钮？

2 个答案: