Проблема не в самой сетке bootstrap, проблема в том, как отображаются ваши флажки.
Вы определяете в классе .align-nicely, что ваша группа флажков всегда должна быть 3 столбца. display: grid не так уж и умен. Итак, если вы укажете, что это 3 столбца, это будет 3 столбца и все остальное будет игнорироваться. Вот почему ваш контент переполняется.
Итак, чтобы исправить проблему или хотя бы улучшить ее. Вы должны изменить способ обработки столбцов display: grid.
Один из способов - использовать запросы CSS @media, чтобы определить, сколько столбцов должно быть при заданной ширине экрана. Таким образом, вы можете масштабировать их по мере уменьшения экрана.
Приведенный ниже CSS должен работать, если вы используете <b-col xl='6'> с текущим текстом.
.align-nicely {
display: grid;
grid-column-gap: 10px;
grid-row-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
}
@media screen and (max-width: 1350px) {
.align-nicely {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (max-width: 576px) {
.align-nicely {
grid-template-columns: 1fr;
}
}
Другое решение может быть для использования функции repeat() в сочетании с minmax(). Этот вариант будет намного более динамичным c, чем первый, но нарушит выравнивание между вашими различными группами.
.align-nicely {
display: grid;
grid-column-gap: 10px;
grid-row-gap: 10px;
/*
The 110px inside minmax(), is how small each column is allowed to get.
So if there isn't space on the current row for the column to be over 110px,
it will be moved to a new row. So you will need to adjust this based on your content size.
*/
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}