В этом посте мы обсудим, что такое пустые пространства и как их можно удалить для определенного div в Bootstrap.
Что такое Gutter Space в Bootstrap?
Желоба — это пробелы или промежутки между столбцами, созданные горизонтальным заполнением. Они используются для поддержки адаптивного выравнивания контента и пробелов в системе сетки Bootstrap.
На приведенном ниже изображении показана строка с красной рамкой вокруг нее. В строке существуют три элемента div одинакового размера с одинаковыми столбцами сетки. Хотя столбцы равны, между ними все еще есть промежутки между ними:
Как удалить пространство желоба для определенного div в Bootstrap?
В Bootstrap класс « без желобов ” используется для устранения пробелов в любом div.
Для этого:
- Добавить ' <дел> ” тег вместе с классом “ main-div ».
- Затем отрегулируйте раздел строки, добавив еще один « <дел> » элемент с классом « ряд ». Поскольку мы должны удалить пробелы из строки, укажите класс « без желобов ' внутри.
- Чтобы разделить строку сетки на три равных столбца, используйте класс « столбец-4 ».
- Внутри контейнера «» каждого столбца настройте элементы «» с помощью классов « столбец-1 », « столбец-2 ', и ' столбец-3 ', соответственно: < див класс знак равно 'main-div' >
< див класс знак равно 'ряд без желобов' >
< див класс знак равно 'кол-4' >
< див класс знак равно 'колонка-1' >< / див >
< / див >
< див класс знак равно 'кол-4' >
< див класс знак равно 'колонна-2' >< / див >
< / див >
< див класс знак равно 'кол-4' >
< див класс знак равно 'колонна-3' >< / див >
< / див >
< / див >
< / див >CSS
В разделе CSS классы, упомянутые на HTML-странице, оформлены с помощью нескольких свойств стиля.
Класс стиля «main-div»
.main-div {
ширина : 600 пикселей;
поле: 50px авто;
}“ .main-div ” упоминается для доступа к элементу div, имеющему класс “ main-div ». К этому классу применяются следующие свойства:
- “ ширина ” определяет ширину элемента.
- “ прибыль » задает интервал вокруг элемента.
Класс стиля «строка»
.ряд {
граница : 1 пиксель сплошной красный;
}Начальная загрузка» ряд » класс добавляется с помощью « граница ' имущество. Это завершит строку сетки заданной шириной, стилем и цветом границы.
Три класса» столбец-1 », « столбец-2 ', и ' столбец-3 ” присваивается CSS “ фоновый цвет ' и ' высота ” свойства, чтобы сделать их заметными.
Класс стиля «столбец-1»
.столбец- один {
задний план- цвет : бирюзовый;
высота : 200 пикселей;
}Класс стиля «столбец-2»
.столбец- 2 {
задний план- цвет : Виолетта;
высота : 200 пикселей;
}Стиль «столбец-3» класс
.столбец- 3 {
задний план- цвет : желто-зеленый;
высота : 200 пикселей;
}Можно заметить, что « <дел> ' контейнер с классом ' ряд ” был успешно скорректирован без пробела между ними:
Мы научили вас, как удалить пустое пространство для определенного div в Bootstrap.
Заключение
Чтобы удалить пустые пространства для определенного div, класс « без желобов ' может быть использован. Для этого добавьте « <дел> » вместе с « ряд без желобов ' класс. В этом посте представлено исчерпывающее руководство по пустым пространствам и тому, как их можно устранить для определенного div в Bootstrap.