40

我的引导卡的 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 -->
4

4 回答 4

105

有边境公用事业可以帮助解决这个问题。从链接：

减法

<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-0您可以像这样添加 CSS 类card：

<div class="card mb-4 border-0">
</div>
于 2018-11-20T16:43:16.880 回答
51

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

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

于 2018-06-08T11:28:59.453 回答
25

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

于 2018-11-03T03:44:30.237 回答
1

最好使用引导变量。您可以使用这些变量自定义默认卡片样式，并且它不会覆盖 Bootstrap CSS。您可以在此处查看如何执行此操作。 引导主题

// Cards

$card-spacer-y:                     .75rem !default;
$card-spacer-x:                     1.25rem !default;
$card-border-width:                 $border-width !default;
$card-border-radius:                $border-radius !default;
$card-border-color:                 rgba($black, .125) !default;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
$card-cap-bg:                       rgba($black, .03) !default;
$card-cap-color:                    null !default;
$card-height:                       null !default;
$card-color:                        null !default;
$card-bg:                           $white !default;
$card-img-overlay-padding:          1.25rem !default;
$card-group-margin:                 $grid-gutter-width / 2 !default;
$card-deck-margin:                  $card-group-margin !default;
$card-columns-count:                3 !default;
$card-columns-gap:                  1.25rem !default;
$card-columns-margin:               $card-spacer-y !default;
于 2020-06-05T05:06:58.543 回答