Šajā rakstā tiks apspriests, kas ir notekas vietas un kā tās var noņemt konkrētam Bootstrap div.
Kas ir Gutter Space programmā Bootstrap?
Notekas ir atstarpes vai spraugas starp kolonnām, ko rada horizontāls polsterējums. Tie tiek izmantoti, lai atbalstītu atsaucīgu satura līdzināšanu un atstarpes Bootstrap režģa sistēmā.
Zem dotā attēla ir redzama rinda ar sarkanu apmali. Rindā ir trīs vienāda lieluma div elementi ar vienādām režģa kolonnām. Lai gan kolonnas ir vienādas, starp tām joprojām ir notekcaurules:
Kā noņemt notekas atstarpi noteiktam div elementam Bootstrap?
Programmā Bootstrap klase ' bez notekas ” tiek izmantots, lai likvidētu jebkura div.
Šim nolūkam:
- Pievienojiet ' 'atzīme kopā ar klasi' galvenais-div ”.
- Pēc tam pielāgojiet rindas sadaļu, pievienojot citu '
'elements ar klasi' rinda ”. Tā kā mums ir jānoņem atstarpes no rindas, norādiet klasi ' bez notekas ” tās ietvaros.- Lai sadalītu režģa rindu trīs vienādās kolonnās, izmantojiet klasi ' kolonna-4 ”.
- Katras kolonnas konteinerā “
” pielāgojiet “” elementus ar klasēm “ kolonna-1 ”, “ kolonna-2 ', un ' kolonna-3 ”, attiecīgi: < div klasē = 'galvenais-div' >
< div klasē = 'rindu bez notekas' >
< div klasē = 'kolonna-4' >
< div klasē = 'kolonna-1' >< / div >
< / div >
< div klasē = 'kolonna-4' >
< div klasē = 'kolonna-2' >< / div >
< / div >
< div klasē = 'kolonna-4' >
< div klasē = 'kolonna-3' >< / div >
< / div >
< / div >
< / div >CSS
CSS sadaļā HTML lapā minētās klases ir veidotas ar vairākām stila īpašībām.
Stila “main-div” klase
.main-div {
platums : 600 pikseļi;
piemale: 50px auto;
}' .main-div ' ir minēts, lai piekļūtu div elementam ar klasi ' galvenais-div ”. Šai klasei tiek lietotas šādas īpašības:
- ' platums ” nosaka elementa platumu.
- ' starpība ” iestata atstarpi ap elementu.
Stilu “rindu” klase
.rinda {
robeža : 1 px vienkrāsains sarkans;
}Bootstrap ' rinda klase ir pievienota ar ' robeža ” īpašums. Tādējādi režģa rinda tiks aplauzta noteiktā platumā, stilā un krāsā.
Trīs klases' kolonna-1 ”, “ kolonna-2 ', un ' kolonna-3 ” ir piešķirts CSS fona krāsa ' un ' augstums ” īpašības, lai tās būtu pamanāmas.
Stila “kolonna-1” klase
.kolonna- viens {
fons- krāsa : tirkīzs;
augstums : 200 pikseļi;
}Stila “kolonna-2” klase
.kolonna- 2 {
fons- krāsa : violets;
augstums : 200 pikseļi;
}Stila “kolonna-3” klase
.kolonna- 3 {
fons- krāsa : dzeltenzaļš;
augstums : 200 pikseļi;
}Var novērot, ka '
' konteiners ar klasi ' rinda ” ir veiksmīgi noregulēts bez notekas starp tām:
Mēs esam iemācījuši jums, kā noņemt notekas vietu konkrētam divam pakalpojumā Bootstrap.
Secinājums
Lai noņemtu notekas atstarpes konkrētam divam, klase ' bez notekas ' Var izmantot. Šim nolūkam pievienojiet '
” elementu kopā ar “ rindu beznotekas ” klase. Šajā ziņojumā ir sniegts visaptverošs ceļvedis par noteku telpām un to, kā tās var novērst konkrētam Bootstrap div. - Pēc tam pielāgojiet rindas sadaļu, pievienojot citu '