如何从选定的卡片 Bootstrap 5 中删除轮廓

Question

对于我的论文，我必须使用 Bootstrap 5 框架制作一个网站，所以我一直在摆弄“Bootstrap Cards”。当我单击卡片时，会出现边框。我想我可以修复它并使用伪元素覆盖它：focus

.card:focus {outline: 0 !important;

例如：

我想这不是大纲，但没有必要的 HTML 知识

已经谢谢了， 卢克·拉蒙

Answer 1

检查

.card

班级有

border

要删除它，只需将其覆盖为

border: none;

Answer 2

尝试使用此代码：

.card:focus {
   border: none !important;
}

看看能不能解决问题

Answer 3

Bootstrap 5 为此有一个单独的类

border-0

。

尝试使用和不使用

border-0

类运行下面的代码，看看它是如何工作的。

有关 Bootstrap 中边框的更多信息此处。 希望这有帮助:)

<!--link to bootstrap 5 script and styles-->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<!-- bootstrap 5 card with no borders without modifying your .css-->
<!--attention to the border-0 class below-->

<div class="card border-0"> 
  <div class="card-body">
    <h1 class="display-1">Card With No Borders!</h1>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum dui arcu, eu aliquet odio elementum non. Curabitur vel mi ligula. In vel dolor diam. Curabitur ornare, magna eget ultrices luctus, magna lectus tempus dui, non facilisis elit dolor eu risus. </p>
    <a href="#" class="btn btn-primary">A Button</a>               
  </div>
</div>

Answer 4

.card{边框：无！重要;}