Овај пост ће расправљати о томе шта су празнини и како се могу уклонити за одређени див у Боотстрапу.
Шта је Гуттер Спаце у Боотстрапу?
Олуци су размаци или празнине између стубова произведених хоризонталним подставом. Користе се за подршку прилагодљивом поравнању садржаја и размацима у систему Боотстрап мреже.
Испод дате слике приказан је ред са црвеним оквиром око њега. Унутар реда постоје три елемента див једнаке величине једнаких колона мреже. Иако су колоне једнаке, између њих још увек постоје размаци:
Како уклонити олучни простор за одређени див у Боотстрапу?
У Боотстрапу, класа “ без олука ” се користи да елиминише олучне просторе било ког див.
За ову сврху:
- Додајте „ <див> “ознаку заједно са класом” маин-див ”.
- Затим прилагодите одељак реда додавањем другог „ <див> ” елемент са класом “ ред ”. Пошто морамо да уклонимо размаке из реда, наведите класу „ без олука ' унутар њега.
- Да бисте поделили ред мреже на три једнаке колоне, користите класу „ цол-4 ”.
- Унутар контејнера „<див>” сваке колоне, прилагодите елементе „<див>” класама „ колона-1 ”, “ колона-2 ', и ' колона-3 ', редом:
< див класа = 'олуци без редова' >
< див класа = 'цол-4' >
< див класа = 'колона-1' >< / див >
< / див >
< див класа = 'цол-4' >
< див класа = 'колона-2' >< / див >
< / див >
< див класа = 'цол-4' >
< див класа = 'колона-3' >< / див >
< / див >
< / див >
< / див >
ЦСС
У одељку ЦСС, класе поменуте на ХТМЛ страници су стилизоване са неколико својстава стила.
Стилска класа „маин-див“.
.маин-див {ширина : 600пк;
маргина: 50пк ауто;
}
„ .маин-див ” се помиње за приступ елементу див који има класу “ маин-див ”. На ову класу се примењују следећа својства:
- “ ширина ” дефинише ширину елемента.
- “ маргина ” поставља размак око елемента.
Класа стила „ред“.
.ров {граница : 1пк пуна црвена;
}
Боотстрап” ред ” класа се додаје са “ граница ' имовина. Ово ће умотати ред мреже у одређену ширину, стил и ивицу боје.
Три класе ' колона-1 ”, “ колона-2 ', и ' колона-3 “ додељује се ЦСС “ боја позадине ' и ' висина ” својства да их учини истакнутим.
Класа стила „колона-1“.
.цолумн- једно {позадина- боја : тиркизна;
висина : 200пк;
}
Класа стила „колона-2“.
.цолумн- 2 {позадина- боја : виолет;
висина : 200пк;
}
Класа стила „колона-3“.
.цолумн- 3 {позадина- боја : жуто зелена;
висина : 200пк;
}
Може се приметити да је „ <див> „контејнер са класом“ ред ” је успешно подешен без размака између њих:
Научили смо вас како да уклоните олучни простор за одређени див у Боотстрапу.
Закључак
Да бисте уклонили олучне просторе за одређени див, класа „ без олука ' може се користити. У ту сврху додајте „ <див> ” елемент заједно са „ ред без олука ' класа. Овај пост је пружио свеобухватан водич о олучним просторима и како се они могу елиминисати за одређени див у Боотстрапу.