如何禁用bootstrap 4卡上的边框

Question

灰色轮廓一直出现在我的引导卡的img部分,我想删除它.

    <!-- Card deck -->
                <div class="card-deck">
                    <!-- Card -->
                    <div class="col-md-6 col-lg-4 col-xl-3">
                        <div class="card mb-4">
                            <!--Card image-->
                            <div class="view overlay"><img alt="Work eyewear" class="card-img-top img-fluid" src="img/clothing-1.jpg"></div><!--Card content-->
                            <div class="card-body">
                                <!--Title-->
                                <h4 class="card-title">PPE</h4><!--Text-->
                                <p class="card-text">PPE is equipment that will protect the user against health or safety risks at work...</p><!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                                <a class="" href="https://shop.spartansafety.co.uk/personal-protection-s/1820.htm">SHOP NOW <i class="fas fa-arrow-right fa-xs"></i></a>
                            </div>
                        </div>
                    </div><!-- Card -->

Answer 1

有边境实用程序可以帮助解决这个问题.从链接:

减法

<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>

因此,对于您的场景,由于您要删除所有边框,您可以将border-0CSS类添加到您的card类似中,以便:

<div class="card mb-4 border-0">
</div>

Answer 2

如果你检查.card班级有一个border: 1px solid #e5e5e5;

要删除它,只需将其覆盖为 border: none;

Answer 3

简单地说,你可以使边界为零, <div class="card border-0">