Question

我正在尝试在Bootstrap 4卡中的整个卡周围添加较粗的边框。应该厚一点，但是什么也没发生。我将在此处提供一段代码：

distinct

还有我的CSS：

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

我能做些什么来达到最终结果吗？

谢谢。

Answer 1

border-style在组合属性时无效。将其更改为border即可使用。

Demo

Answer 2

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

为我工作...

Answer 3

CSS 方式

而不是使用 border-style 而是使用 border:5px solid black; 您的最终输出将如下所示。

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

引导方式

如果您使用的是 Bootstrap 5，您还可以在卡片类上添加引导类 border border-5。

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

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

引导卡边框厚度

3 个答案: