Кто подскажет откуда здесь берется такое огромное пространство?

Question

[Дмитрий Дев]

Вот кусок кода:

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

Прям если скопировать без всего остального (таблицы свойств и других блоков) то так и получается.
Кто знает из-за чего такое получается?

Comments

[FeST1VaL]

Песочницу или Скриншоты хотя бы проблемы...

[Виктор Таран]

+1
я так понимаю ему не нравится вот это
<div class="col-3 bg-image-groom rounded"></div>
в частности col-3

Пример сделайте тут:
https://jsfiddle.net/boilerplate/bootstrap

[Дмитрий Дев]

Виктор Таран, вот https://jsfiddle.net/kadikey58/khtqr52z/, как видите, в первом варианте получается отступ. Я понять не могу откуда он. Но при этом если вместо flex-column поставить d-block или к list-gtoup-item приписать w-100 то эти отступы пропадают.

[Виктор Таран]

dikey58,
КЭП
какой бэкграунд на роу
какой болрдер на кол?
СТАНДАРТНЫЕ КЛАССЫ НЕ КАСТОМЯТ!!!

Покажите что вы хотели сверстать ?

[Дмитрий Дев]

Виктор Таран, я там кастомизировал лишь для того, чтобы показать этот непонятный отступ.
Передел, чтобы было понятнее https://jsfiddle.net/kadikey58/khtqr52z/3/
Вот что я хотел сделать и в принципе сделал, просто так и осталось не понятно откуда там этот отступ берется.