Как убрать отступы в boostrap 4?

Question

[Иван Иванов]

Здравствуйте, не могу понять как правильно реализовать следующую задачу. Существует массив с разными классификациями свойств, который в свою очередь имеют свойства. Надо распределить всё это дело в 2 колонки. Использую boostrap 4. Вот код

<?$numberProp = $arResult['NUMBER_PROP']['NUMBER'];?>
<div class="property-wraper container-fluid">
	<div class="row">
		<?for ($i = 0; $i <= $numberProp-1; $i++):?>
			<?if (!empty($arResult["PROP_FULL_".$i])):?>
				<div class="col-md-6 col-12 property-col">
					<table width="100%" class="property-table">
						<tr><td colspan="2"><div class="title_harakter"><?echo GetMessage('CATALOG_PROP_'.$i);?></div></td></tr>
						<?foreach($arResult["PROP_FULL_".$i] as $arFullProp):?>
							<tr>
								<td class="code-product-name" height="30" width="50%" style="background-position-y: 17px;">
									<div style="height: 100%; display: inline-block; background:#fff; line-height:30px; padding-right: 2px;">
										<?=$arFullProp["NAME"]?>
									</div>
								</td>
								<td width="50%" align="right" class="code-product-value" height="30" style="background-position-y: 17px;">
									<div style="height: 100%; display: inline-block; background:#fff; line-height:30px;">
										<?=$arFullProp["VALUE"]?>
									</div>
								</td>
							</tr>
						<?endforeach;?>
					</table>
				</div>
			<?endif;?>
		<?endfor;?>
	</div>
</div>

всё строится так как надо, но есть отступы, как на картинке снизу. Я понимаю, что это закономерно, как как всё строится в соответствии с boostrap сеткой, но как мне реализовать так, что бы эти отступы исчезли и блоки строились в 2 колонки сразу друг под другом?

Comments

[Rustam Bainazarov]

Не использовать классы Bootstrap'a, а делить общий блок на колонки с помощью column-count с break-inside: avoid.

https://css-tricks.com/almanac/properties/b/break-...

[Rustam Bainazarov]

Ну или просто не использовать Bootstrap тут.

[Rustam Bainazarov]

Хотя всё может быть ещё проще.

Выложите результат генерации какого-нибудь блока на Jsfiddle со стилями.

[Иван Иванов]

Рустам Байназаров, да спасибо помогло, единственный минус, нельзя указать ширину колонки в процентах. Приходиться прописывать для каждого разрешения вручную. Напишите как ответ, отмечу решением.

[Rustam Bainazarov]

Иван Иванов, у меня есть ещё другая идея, выложите код на Jsfiddle со стилями, иначе мне не понятно нормально. Если не сработает, то тогда напишу ответ с решением выше, спасибо.

[Иван Иванов]

мне проще дать ссылку на проект Вот тут

[Rustam Bainazarov]

Иван Иванов, к сожалению, вариант с колонками лучше всего оказался. Ещё нужно убрать жесткую высоту у td.

Answer 1

[Rustam Bainazarov]

https://css-tricks.com/almanac/properties/b/break-...
Не использовать классы Bootstrap'a (.col-md-6.col-12), а делить общий блок на колонки с помощью column-count: 2, break-inside: avoid и column-gap: XXXpx.

.property-wraper .row {
    /* отступ */
    column-count: 2;  /* количество колонок */
    column-gap: 20px; /* отступ между колонками */
    display: block;   /* с flex ибо не работает */
    padding: 0 20px;  /* отступ по бокам до контента */
}

Плюс, убрать жесткую высоту 30px у <td>, заданную inline, а также все стили :nth-child.

Выйдет так: