Как сделать прозрачный зазор между колонками?

Question

[Suil]

Добрый день.

Только изучаю верстку с помощью Bootstrap.
Подскажите пожалуйста, как добиться таких прозрачных зазоров?

<div class="row">
           <div class="col-md-2"><img src="icon.png" alt=""><span>Текст</span></div>
           <div class="col-md-2"><img src="icon.png" alt=""><span>Текст</span></div>
           <div class="col-md-2"><img src="icon.png" alt=""><span>Текст</span></div>
           <div class="col-md-2"><img src="icon.png" alt=""><span>Текст</span></div>
           <div class="col-md-2"><img src="icon.png" alt=""><span>Текст</span></div>
           <div class="col-md-2"><img src="icon.png" alt=""><span>Текст</span></div>
               
</div>

Comments

[Ярослав Зеленский]

А ты уже знаком с ctrl+shift+C в Хроме? Если нет, то бегом туда!

Наводишь курсор на элемент и читаешь стили. Наверняка найдешь то что нужно =)

И да, инструмент хороший. Есть наверняка и доругие, но я по привычке этим пользуюсь =)

[Suil]

Ярослав Зеленский, к сожалению с картинками такое не работает)

[Максим]

Suil, у вас три блока в ряду верно ?

[Ярослав Зеленский]

Suil, Дай ссылку на источник

[Suil]

Максим Ленский, у меня должно быть 6 блоков (колонок)

[Suil]

Ярослав Зеленский, Источник чего?
У меня есть просто макет, по которому нужно сверстать

Answer 1

[Антон]

Выкиньте свой бутстрап, и классы на свои поменяйте, т.к. мне их переименовывать было лень

Comments

[Suil]

Спасибо)
Нужно начать изучать flex)

[Антон]

Suil, 4 бустрап и работает на флексах. Просто совать повсеместно этот бутстрап там, где он не нужен или не решает нужную задачу, а если и решает, то с костылями - на хрен оно не нужно тогда

[Ярослав Зеленский]

1.Можно не выкидываю просто дописать свои классы к уже имеющимся.
2. Спасибо что вы есть... Вроде пара строк, а аж до слез. Как красиво и правильно написан код...

spoiler

Говнокодер заливает слезами свою черную зависть

Answer 2

[Михаил]

поиграться с margin и padding

Comments

[Suil]

Пробовал, тогда последние колонки, на следующую строчку переходят.

Конечен можно без Bootstrap, просто прописать другую ширину для колонок.
Вдруг через Bootstrap это гораздо проще.

[Михаил]

внимательно посмотри что такое padding и margin
где именно будут отступы, также nth-child
использование margin-left и margin-right padding-left padding-right
т.е. если просто словами можно так:
делаем на колонки отступ, на первую колонку левый отступ убираем, на последнюю правый отступ убираем
при использование margin произойдет сдвиг и колонка перейдет на строчку, а padding делает отступ внутри колонки, поэтому контент в ней станет меньше, но сами блоки останутся тех-же размеров

вообщем, чтобы понять как выполнить поставленную задачу надо понять чем выполнять(почитать, что обозначают вышеуказанные свойства) и поиграться(попрактиковаться).

[Михаил]

проще можно: то, что в col-md-2 находится засунуть еще в один блок к которому добавить свой класс и в нем поставить padding: Xpx где X любое кол-во пикселей