bootstrap 带边框和填充的圆形类元素答案

【问题标题】：bootstrap round-circle class elements with border and paddingbootstrap 带边框和填充的圆形类元素
【发布时间】：2019-01-28 23:14:58
【问题描述】：

我有一个包含多个项目的引导轮播。

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

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

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

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

帮助！ :-)

谢谢

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

【问题讨论】：

标签： jquery html css twitter-bootstrap bootstrap-4

【解决方案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

【讨论】：

感谢您的回答！它还不起作用，但路径已设置。我现在的问题是周围的
破坏了 js 逻辑。我编辑了我的问题以更好地解释自己..
编辑后的问题与原始问题有很大不同。我已经回复了原文。您应该隔离第二个问题，如果无法解决，请提出另一个问题。

【解决方案2】：

将每张图片放入一个容器中。

.round-container{
  display:inline-block;
  margin:10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>


<div class="round-container">
<img class="rounded-circle" src="https://via.placeholder.com/100x100" width="100">
</div>

<div class="round-container">
<img class="rounded-circle" src="https://via.placeholder.com/100x100" width="100">
</div>

<div class="round-container">
<img class="rounded-circle" src="https://via.placeholder.com/100x100" width="100">
</div>

【讨论】：

感谢您的回答，但没有奏效。原因是js坏了，布局没有响应..