Как удалить пробел для определенного div в Bootstrap

Kak Udalit Probel Dla Opredelennogo Div V Bootstrap

Система сетки Bootstrap состоит из множества контейнеров, строк и столбцов для размещения и выравнивания содержимого. Система сетки представляет собой строку с 12 виртуальными столбцами, чтобы сделать веб-страницы полностью отзывчивыми. Однако вокруг или между столбцами есть отступы или пробелы. Эти пространства называются « водосточные желоба ».

В этом посте мы обсудим, что такое пустые пространства и как их можно удалить для определенного 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.