Bootstrap卡片边框厚度

Question

我试图在Bootstrap 4卡片的周围添加更粗的边框。虽然应该变得更厚，但没有任何反应。以下是我的代码片段：

<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-3">
            <div class="card h-100">
                <img src="img/html.jpg" alt="HTML" class="card-img-top " style="display: block">
                <div class="card-block">
                    <h3 class="card-title"> Projects </h3>

                    <p class="font-weight-light"> hello world hello worldhello worldhello worldhello worldhello world</p>
                    <form action="https://www.w3schools.com/html/">
                        <button type="submit" class="btn btn-danger btn-lg btn-block">Learn More</button>
                    </form>
                </div>
            </div>
        </div>

我的CSS代码如下：

 .card {
     border-style: 5px solid black;
     padding-bottom: 3%;
 }

 .row {
     padding-bottom: 15%;
 }

有什么我可以做来达到最终结果吗？

谢谢。

- Christian Begg

---

以你的工作为荣，并保持良好的格式。这将为你节省很多麻烦。它还表现出对那些帮助你的人的尊重。此外，使用一个可以显示错误的编辑器，比如我刚刚删除的额外引号。 - isherwood

好的，我在这里切入的方式可能不太好。 - Christian Begg

Answer 1

border-style不能在组合属性时使用。将其改为 border 即可正常工作。

 .card {
     border: 5px solid black;
 }

Demo

- isherwood

---

适用于Bootstrap 4.4.x。 - MarcoZen

Answer 2

<div class="card" style="border: 2px solid #07bc4c"></div>

对我很有效...

- Muhammad Zakaria

Answer 3

CSS方式

与其使用border-style，不如使用border:5px solid black;，最终输出效果如下。

.card {
     border: 5px solid black;
     padding-bottom: 3%;
 }

Bootstrap 方法

如果您正在使用 Bootstrap 5，您也可以在卡片类上添加 bootstrap 类 border border-5。

您的最终输出将如下所示。

<div class="card h-100 border border-5">
</div>

- Shoaib Muhammad Arif