Объединение сетки CSS с сеткой Bootstrap

район СамбарисЗаблокированоUnblockFollowFollowing

29 апр

До того, как я открыл CSS-сетку, я много использовал загрузочную сетку. Сетка Bootstrap была разумным решением многих проблем с отзывчивостью, которые у меня были тогда, когда я был новичком. Затем я обнаружил сетку CSS. Преимуществом сетки CSS по сравнению с сеткой начальной загрузки является ее двумерное качество (возможность использовать строки и столбцы), в отличие от одномерной строки начальной загрузки.

В Интернете идет много споров о том, что лучше, когда и как их использовать. Это меня очень смутило. Хотя я больше использую сетку CSS, я люблю их обоих. Хотя сетка CSS значительно мощнее, я считаю сетку начальной загрузки более гибкой. Мне действительно нужно выбирать?

Bootstrap имеет встроенную систему параметров сетки, которая работает на нескольких устройствах, и это помогло мне отказаться от использования медиа-запросов. Используя параметры сетки начальной загрузки, я могу правильно расположить так, как я хочу, чтобы они отображались на разных экранах, без использования медиа-запросов.

Вот что я имею в виду

Ссылка на ручку

В приведенном выше коде я создал вложенную сетку в

с классом .section из четырех столбцов. На самом деле я хочу, чтобы каждый из четырех столбцов занимал половину ширины экрана на устройствах с разрешением менее 998 пикселей и располагался друг над другом на маленьком экране для удобства чтения. Но сетка CSS не дает мне этого. Он остается неизменным, как вы можете видеть на изображении ниже.

для большого экрана

маленький экран (мобильный вид)

Вложенная сетка остается неизменной. Я не хочу этого. И я не хочу указывать точки останова мультимедиа в CSS.

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

Макет сетки Bootstrap позволяет использовать до 12 столбцов в строке. На большом экране четыре столбца расположены рядом. Каждый столбец занимает 3 единицы из 12 столбцов.

большой экран> 1000px

таблетки

На среднем экране столбцы теперь занимают 6 единиц, что равносильно разделению 12 столбцов на два столбца.

мобильный вид

В то время как на небольших экранах, таких как мобильные устройства, столбцы занимают всю ширину и накладываются друг на друга.

CSS-сетка и загрузочная сетка могут отлично работать вместе. Вместо того, чтобы противопоставлять их друг другу, вам нужно найти способ объединить эти две мощные сетки.