twitter-bootstrap Boostrap 卡的边界
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45922307/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Border of Boostrap cards
提问by Marion
Hi I want to use Bootstrap v4.0.0-beta Cards.
嗨，我想使用 Bootstrap v4.0.0-beta 卡。
First the class "card-block" not works for me. Only if I use the class "card-body" it looks like the examples.
首先，“卡片块”类对我不起作用。只有当我使用“card-body”类时，它才会看起来像示例。
How can I remove the double border between my cards? Every card has a border of 1px - between them there is a border of 2px, I want only 1px. Is there a simple possibility?
如何去除卡片之间的双边框？每张卡片的边框为 1px - 它们之间有 2px 的边框，我只想要 1px。有没有简单的可能？
This is my code:
这是我的代码：
<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>
Thank's for your help.
谢谢你的帮助。
回答by Zim
Use the border utilities...
使用边界实用程序...
https://www.codeply.com/go/tukHrs1GLz
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>
Also note, card-blockchanged to card-bodyfrom alpha 6 to beta
另请注意，从alpha 6card-block更改为 betacard-body
It would be better to put the cards insidethe columns.
最好将卡片放在列内。
回答by Jade Cowan
Bootstrap 4 has a border classesthat you can add to your cards. Here's your code with the border-right-0class added to all of the cards except the last one.
Bootstrap 4 有一个边框类，您可以将其添加到您的卡片中。这是您的代码，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>
