具有边框和填充的引导圆类元素 [英] bootstrap round-circle class elements with border and padding
本文介绍了具有边框和填充的引导圆类元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个带有多个项目的引导轮播.
I have a bootstrap carousel with multiple items.
我的html:
<div class="carousel w-100 " data-ride="carousel" id="recipeCarousel">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<img class="d-block col-sm-12 col-md-4 rounded-circle mystyle" src="{% static 'core/src/img/staff_member_01.jpg'%}">
<img class="d-block col-sm-12 col-md-4 rounded-circle mystyle" src="{% static 'core/src/img/staff_member_02.jpg'%}">
<img class="d-block col-sm-12 col-md-4 rounded-circle mystyle" src="{% static 'core/src/img/staff_member_03.jpg'%}">
</div>
[...]
</div>
</div>
我的CSS:
.mystyle{
border:1px solid #d3232e;
}
如下面的屏幕快照所示,我的问题是我需要在图像之间添加一些填充(由引导网格系统处理),这会破坏边框布局.
As you see in the screenshot below, my issue is that I need to give some padding between the images (handled by bootstrap grid system), and that breaks the border layout.
如果我使用边距并删除填充
If I use margin and delete padding
.mystyle{
margin: 0 0.4em;
padding: 0!important;
border:1px solid #d3232e;
}
帮助! :-)
谢谢
编辑1 我写了一个新问题来解决损坏的问题解决此处提出的问题后,轮播jQ.
EDIT 1 I wrote a new question to solve the issue of the broken carousel jQ after fixing the problem posed here.
推荐答案
您应将图像放在col div中,并使用img-fluid
...
You should put the images inside col divs, and make them responsive using img-fluid
...
<div class="carousel w-100" data-ride="carousel" id="recipeCarousel">
<div class="carousel-inner text-center w-100" role="listbox">
<div class="carousel-item d-flex row active">
<div class="col-sm-12 col-md-4"><img class="rounded-circle img-fluid mystyle" src="//placehold.it/300"></div>
<div class="col-sm-12 col-md-4"><img class="rounded-circle img-fluid mystyle" src="//placehold.it/300"></div>
<div class="col-sm-12 col-md-4"><img class="rounded-circle img-fluid mystyle" src="//placehold.it/300"></div>
</div>
</div>
</div>
那么就不会有重叠.
https://www.codeply.com/go/b7DE9Q6AOm
这篇关于具有边框和填充的引导圆类元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文