如何在引导卡中添加两个图标之间的边框？

Question

我想在card-header中添加边框。我有两个图标-一个在左边，另一个在右边。

下面是一个示例：

​

​

HMTL和CSS

​

.card-header .compl {
  border-right: 2px solid;
  border-top-width: 12px;
  padding-right: 10px;
}

<div class="card bg-dark" style="width: 18rem;">
    <div class="card-header">
        <div class="compl float-start mp-5">
            <ion-icon name="checkmark" class="fs-4"></ion-icon>
        </div>
        <div class="views float-end">
            <ion-icon name="eye" class=" fs-4"></ion-icon>
        </div>
    </div>
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the.</p>
        <div class="progress" style="height: 8px;">
            <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50"
                aria-valuemin="0" aria-valuemax="100">25%</div>
        </div>
    </div>
</div>

​

Answer 1

使用您自己的图标删除方框链接，这仅用于图标。上面的链接和附加在代码中的脚本是用于引导的，您已经在使用它了，所以忽略这些。从css更改边框颜色

​

.border-lr {
    border-right:2px solid black;
    border-left:3px solid yellow;
}

 <!-- bootstrap 4 files you are already using  -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <!--for icon you can use your own -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  
  
<div class="container">
  <h2>Card Header and Footer</h2>
  <div class="card">
    <div class="card-header border-0 p-0 bg-dark d-flex">
     <div class="py-3 px-4 border-lr"><i class="fas fa-file text-light"></i></div>
  <div class="ml-auto py-3 px-4"><i class="fas fa-bars text-light"></i></div>

    </div>
    <div class="card-body">Content</div> 
    <div class="card-footer">Footer</div>
  </div>
</div>

​