Boostrap卡边框

Question

您好我想使用Bootstrap v4.0.0-beta卡。

首先，班级“卡块”对我不起作用。只有当我使用“卡体”这个类时，它看起来就像是例子。

如何删除卡片之间的双边框？每张卡都有1px的边框 - 它们之间有2px的边框，我只想要1px。有一个简单的可能性吗？

这是我的代码：

    <div class="row no-gutters">
        <div class="card col-sm-6 col-lg-3">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
        <div class="card col-sm-6 col-lg-3">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
        <div class="card col-sm-6 col-lg-3">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
        <div class="card col-sm-6 col-lg-3">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
    </div>

感谢您的帮助。

Answer 1

使用border utilities ...

https://www.codeply.com/go/tukHrs1GLz

   <div class="row no-gutters">
        <div class="card col-sm-6 col-lg-3 border-right-0">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
        <div class="card col-sm-6 col-lg-3 border-right-0">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
        <div class="card col-sm-6 col-lg-3 border-right-0">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
        <div class="card col-sm-6 col-lg-3">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
    </div>

另请注意，card-block已从alpha 6 to beta

更改为card-body

最好将卡放在列中。

Answer 2

Bootstrap 4有border classes你可以添加到你的卡片。这是您的代码，除了最后一张卡之外，所有卡都添加了border-right-0类。

<div class="row no-gutters">
        <div class="card col-sm-6 col-lg-3 border-right-0">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
        <div class="card col-sm-6 col-lg-3 border-right-0">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
        <div class="card col-sm-6 col-lg-3 border-right-0">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
        <div class="card col-sm-6 col-lg-3">
            <div class="card-img-top"><img src="pic.jpg" /></div>
            <div class="card-body">
                <p class="card-text">my text</div>
            <div class="card-footer">my footer</div>
        </div>
    </div>

https://codepen.io/cowanjt/pen/xLyPZG