jquery - 带有边框和填充的 bootstrap round-circle 类元素

Question

我有一个包含多个元素的 Bootstrap 轮播。

我的 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;
}

正如您在下面的屏幕截图中看到的，我的问题是我需要在图像之间提供一些填充(由 Bootstrap 网格系统处理)，这会破坏边框布局。

如果我使用边距并删除填充

.mystyle{
  margin: 0 0.4em;
  padding: 0!important;
  border:1px solid #d3232e;
}

帮助! :-)

谢谢

编辑 1我写了一个new question在解决这里提出的问题后解决 broken carousel jQ 的问题。

Answer 1

您应该将图像放在 col div 中，并使用 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