Устранение пробелов в сложенных строках Bootstrap

При построении сетки Bootstrap для страницы портфолио вы можете столкнуться с проблемой, при которой более длинные плитки вызывают разрыв в макете при укладке происходит. Эта проблема возникает из-за разной высоты элементов внутри сетки. Чтобы решить эту проблему, существует несколько решений:

1. Установите высоту для всех элементов портфолио: Установка фиксированной высоты для каждого элемента портфолио обеспечивает единообразную укладку и устраняет пробелы.
2. Используйте Masonry для динамической подгонки: Masonry — это инструмент компоновки, который динамически упорядочивает элементы в соответствии с доступным пространством, устраняя пробелы даже при различная длина контента.
3. Используйте адаптивные классы и Clearfix: Как определено в документации Bootstrap в разделе «Адаптивный сброс столбцов», этот подход предполагает использование адаптивных классов и Clearfix для решения проблем выравнивания сетки на разных уровнях. точки останова.
4. Используйте jQuery для настройки высоты столбцов Динамически: jQuery можно использовать для динамической регулировки высоты столбцов, гарантируя их правильное выравнивание независимо от длины содержимого.

Вот конкретный метод решения проблемы:

Добавьте элемент div Clearfix после каждого элемента сетки:

    

        ...
    
    

Примените медиа-запрос к элементу div Clearfix, чтобы очистить число с плавающей запятой:

@media (max-width: 767px) {
    .portfolio>.clear:nth-child(6n)::before {
        clear: both;
    }
}

Этот подход обеспечивает:

• Читаемую и поддерживаемую разметку: HTML остается простым, что позволяет легко управлять элементами портфолио.
• Выравнивание на экранах разных размеров: CSS обеспечивает выравнивание элементов по всем общим точкам останова, устраняя пробелы.