如何重新着色引导卡边框颜色?

Question

所以，我正在使用引导卡，使我的网页看起来整洁的东西。引导卡的默认颜色是白色。对于导航条，你可以在顶部设置颜色选项比如navbar-dark之类的，但在这里你不能这么做，所以我必须手动设置卡片的颜色。一切都很顺利，但是有一件小事让我很恼火，那就是边界。分隔页眉和标题的边界。边框只能以黑色显示，因为我将卡片重新着色为黑色，所以您无法看到它。

问题截图:https://ibb.co/8MqtRJP

PS:如果你看不到引导卡上的边框，请再看一遍，因为一开始很难看到

我代码:

<div class="card" style="width: 800px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
<h5 class="card-header" style="color: white" >Time Managing</h5>
<div class="card-body" style="color: white" >
<h5 class="card-title">Prioritization</h5>
<p class="card-text">Additional content.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>

我试过使用class="卡"给它一个样式

.card {
border: color: white;
}

我希望边框变成白色，因为大多数边框都是和border标签一起使用的，但是那不起作用

有没有人有什么想法或答案来解决这个问题?

Answer 1

似乎在card-header上，您可以使用Bootstrap类，如border-bottom border-light，或指定自定义类或内联样式与border-bottom: 1px solid #fff。

关于Bootstrap: documents中border类的更多信息

关于border: MDN的更多信息

的例子:

main {
background-color: #333;
color: #fff;
padding: 20px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<main>
<p>With Bootstrap class 👇</p>
<div class="card" style="width: 800px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
<h5 class="card-header border-bottom border-light" style="color: white">Time Managing</h5>
<div class="card-body" style="color: white">
<h5 class="card-title">Prioritization</h5>
<p class="card-text">Additional content.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
<br/>
<p>With inline style 👇</p>
<div class="card" style="width: 800px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
<h5 class="card-header" style="border-bottom: 1px solid #fff; color: white">Time Managing</h5>
<div class="card-body" style="color: white">
<h5 class="card-title">Prioritization</h5>
<p class="card-text">Additional content.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</main>

Answer 2

你好，它看起来像你的css语法如果稍微关闭试试这个

.card {
border-color: white;
}

color之后应该是你定义颜色的地方，一般每行不应该超过一个，所以<css-property>:<value>;，在这种情况下，你想修改的css属性是border-color，值是白色。

看看你对其他答案的评论，如果它是.card-header底部的边界，你应该在.card-header类上设置相同的border-color值，确保你正在修改的类已经有其他所需的边界属性，如宽度。

在这些情况下，在任何浏览器上使用开发工具进行调试也非常方便。这将允许您在浏览器中检查和修改不同的css样式。我经常在添加css代码之前这样做，以确保样式是正确的，并将发挥作用，特别是当使用第三方框架，如Bootstrap。

Answer 3

这应该在5.3中修复，但在更早的版本中，您可以使用

.card.text-bg-dark {
--bs-card-border-color: #C3CBD2;
}

假设你使用。text-bg-dark

#C3CBD2是BS5卡的默认边框。我忘了是什么变量