Вот кусок кода:
<div class="col-md-4 selector">
<ul id="list-tab" class="nav flex-column list-group" role="tablist">
<li class="list-group-item">
<a href="#list-fromNovorossiysk" class="row list-group-item-action align-items-stretch rounded no-gutters" data-toggle="list" role="tab" aria-controls="fromNovorossiysk" aria-selected="false">
<div class="col-3 bg-image-groom rounded"></div>
<div class="col">
<div>Karen Sanders</div>
<div>Project Manager</div>
</div>
</a>
</li>
<li class="list-group-item">
<a href="#list-fromNovorossiysk" class="row align-items-stretch list-group-item-action rounded no-gutters" data-toggle="list" role="tab" aria-controls="fromNovorossiysk" aria-selected="false">
<div class="col-3">
<img class="img-fluid rounded" src="/img/groom.jpg">
</div>
<div class="col">
<div>Karen Sanders</div>
<div>Project Manager</div>
</div>
</a>
</li>
</ul>
</div>
Делаю переключатели через list-tabs и list-group.
В первом переключателе картинка задним фоном. Во втором через
<img>
В первом переключателя появляется непонятно откуда огромное пространство (даже не отступ), и стоит заменить на картинку через
<img>, пропадает. В данном случае все через bootstrap-4 кроме одного класса, вот его свойства:
.bg-image-groom {
background-image: url(/img/groom.jpg);
background-position: center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Прям если скопировать без всего остального (таблицы свойств и других блоков) то так и получается.
Кто знает из-за чего такое получается?
Простой
Простой
