Как точно указать размер колонки Бутстрапа?

Question

[webhero]

Бывает много таких моментов, что нужно сделать в строке 3-4 колонки с определенным марджином и обнулением последнего; но почему-то колонка чуть больше, чем та же картинка и последний элемент не влезает и перемещается вниз. Как задать определенный размер колонки?

Answer 1

[Максим Тимофеев]

с определенным марджином и обнулением последнего

https://getbootstrap.com/docs/4.1/layout/grid/#no-...

не влезает и перемещается вниз

дайте код, bootstrap тут не при чем, Вы где-то ошиблись, не долна съезжать

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

или не использовать grid и юзать px, что на мой взгляд было бы очень странным решением или разобраться с тем как работает grid:
https://getbootstrap.com/docs/4.1/layout/grid/

Уверен, что у Вы не правильно строите код, отсюда частые проблемы. Или row не используете или контейнеры не верно применяете. Дайте код - подскажем. Если все четко делать, таких проблем как у Вас не бывает.

Comments

[webhero]

https://codepen.io/anon/pen/rvmKWe

[Максим Тимофеев]

webhero,

.blog-item {
    margin-right: 30px; 
}

вот причина переноса. Не стоит применять стили к сетке, это потом вот так плохо заканчивается.
Плохая идея:
<div class="col-6 someMyClass">
Хорошая идея:

<div class="col-6">
          <div class="someMyClass">

[webhero]

Максим Тимофеев, так мне нужен отступ справа по макету, как быть?

[Максим Тимофеев]

webhero, задать родительскому блоку, а в нем уже row в нем уже col и т.д. Не влезайте в логику работы сетки. Она отлично работает когда все манипуляции Вы делаете с ее родителями или потомками. А саму сетку трогать не стоит.

[webhero]

Максим Тимофеев, https://codepen.io/anon/pen/rvmKWe
Посмотрите, пожалуйста, правильно ли я выставил стили к сетке
Потому что я совсем запутался, сейчас у меня вообще марджин не отображается
Аесли убрать no-gutters, то падинги залазят на картинки, какая-то несуразица, раньше не припомню таких проблем
Конечно можно всё флексбоксом обыграть - самое простое, но мне нужно понять именно работу бутстрапа
Поможете разобраться- отмечу решением

[Максим Тимофеев]

но мне нужно понять именно работу бутстрапа

Конечно можно всё флексбоксом обыграть

bootstrap его и использует

Поможете разобраться- отмечу решением

теперь нет, не помогу

[webhero]

Максим Тимофеев, окей, как знаете

Answer 2

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

99% ставлю на то что у вас картинки разной высоты, притом это могут быть даже доли пиксела.
Выстота блока вас не спасет, поскольку когда вы ее выставите фиксомм то у вас будут проблеммы с разной длинной контента особенно при адаптиве.
1 вариант это правелно делать превью и пиксел в пиксел.
2. чтоб избежать 100% такой ситуации в будующем можно сделать небольшое дополнение в php
да это будет не в верстке но все-равно
и так что вам нужно будет сделать
Пустой Кол 12 и visible-lg в вашем случае каждый 3 див
ну и соотвествено кол 12 визибл мд каждый второй
что это даст
1. Дивы никогда не уползут что бы ты в них не делал
2. высота дивов будет подстраиваться автоматически
3. только стандартные классы и ни одного жс для этого
4. стабильность при адаптиве
5. если дивы будут больше чем стандартные то это изменение затронет только один ряд
пример можешь глянуть тут
https://mydefile.ru/catalog