in English

குழிகள்

பூட்ஸ்டார்ப் கிரிட் அமைப்பில் உள்ள உள்ளடக்கத்தை சீரமைக்க மற்றும் பதிலளிக்கக்கூடிய வகையில் உங்கள் நெடுவரிசைகளுக்கு இடையே உள்ள பேடிங்தான் gutters ஆகும்.

இந்தப் பக்கத்தில்

அவர்கள் எப்படி வேலை செய்கிறார்கள்

கிடைமட்டத்தால் உருவாக்கப்பட்ட நெடுவரிசை உள்ளடக்கத்திற்கு இடையே உள்ள இடைவெளிகளே கட்டர்ஸ் ஆகும் padding. ஒவ்வொரு நெடுவரிசையிலும் நாங்கள் அமைத்துள்ளோம் padding-right, மேலும் உள்ளடக்கத்தை சீரமைக்க ஒவ்வொரு வரிசையின் தொடக்கத்திலும் முடிவிலும் அதை ஈடுசெய்ய padding-leftஎதிர்மறையைப் பயன்படுத்துகிறோம் .margin
பள்ளங்கள் 1.5rem( 24px) அகலத்தில் தொடங்கும். இது எங்கள் கட்டத்தை திணிப்பு மற்றும் விளிம்பு ஸ்பேசர் அளவுடன் பொருத்த அனுமதிக்கிறது .
பள்ளங்களை பதிலளிக்கும் வகையில் சரிசெய்யலாம். கிடைமட்ட சாக்கடைகள், செங்குத்து சாக்கடைகள் மற்றும் அனைத்து கால்வாய்களையும் மாற்ற பிரேக்பாயிண்ட்-குறிப்பிட்ட சாக்கடை வகுப்புகளைப் பயன்படுத்தவும்.

கிடைமட்ட சாக்கடைகள்

.gx-*கிடைமட்ட சாக்கடை அகலங்களைக் கட்டுப்படுத்த வகுப்புகள் பயன்படுத்தப்படலாம். பொருந்தக்கூடிய திணிப்பு பயன்பாட்டைப் பயன்படுத்தி, தேவையற்ற வழிதல்களைத் தவிர்க்க, பெரிய சாக்கடைகள் பயன்படுத்தப்பட்டால் .containerஅல்லது .container-fluidபெற்றோரை சரிசெய்ய வேண்டியிருக்கலாம். எடுத்துக்காட்டாக, பின்வரும் எடுத்துக்காட்டில் நாங்கள் திணிப்பை அதிகரித்துள்ளோம் .px-4:

தனிப்பயன் நெடுவரிசை திணிப்பு

html

<div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

.rowஒரு மாற்று தீர்வாக , .overflow-hiddenவகுப்பில் ஒரு ரேப்பரைச் சேர்ப்பது :

தனிப்பயன் நெடுவரிசை திணிப்பு

html

<div class="container overflow-hidden text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

செங்குத்து சாக்கடைகள்

.gy-*நெடுவரிசைகள் புதிய கோடுகளுக்கு மடிக்கும்போது ஒரு வரிசையில் உள்ள செங்குத்து சாக்கடை அகலங்களைக் கட்டுப்படுத்த வகுப்புகள் பயன்படுத்தப்படலாம். .rowகிடைமட்ட சாக்கடைகளைப் போலவே, செங்குத்து சாக்கடைகளும் பக்கத்தின் முடிவில் சில வழிதல்களை ஏற்படுத்தும் . .rowஇது நடந்தால் , .overflow-hiddenவகுப்பில் ஒரு ரேப்பரைச் சேர்க்கவும் :

தனிப்பயன் நெடுவரிசை திணிப்பு

html

<div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

கிடைமட்ட மற்றும் செங்குத்து சாக்கடைகள்

.g-*.overflow-hiddenகிடைமட்ட சாக்கடை அகலங்களைக் கட்டுப்படுத்த வகுப்புகள் பயன்படுத்தப்படலாம், பின்வரும் எடுத்துக்காட்டில் நாம் சிறிய கால்வாய் அகலத்தைப் பயன்படுத்துகிறோம், எனவே ரேப்பர் வகுப்பைச் சேர்க்க வேண்டிய அவசியமில்லை .

தனிப்பயன் நெடுவரிசை திணிப்பு

html

<div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

வரிசை நெடுவரிசைகள் சாக்கடைகள்

வரிசை நெடுவரிசைகளில் கேட்டர் வகுப்புகளையும் சேர்க்கலாம் . பின்வரும் எடுத்துக்காட்டில், பதிலளிக்கக்கூடிய வரிசை நெடுவரிசைகள் மற்றும் பதிலளிக்கக்கூடிய கால்வாய் வகுப்புகளைப் பயன்படுத்துகிறோம்.

வரிசை நெடுவரிசை

html

<div class="container text-center">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
  </div>
</div>

சாக்கடைகள் இல்லை

எங்களின் முன் வரையறுக்கப்பட்ட கட்டம் வகுப்புகளில் உள்ள நெடுவரிசைகளுக்கு இடையே உள்ள பள்ளங்களை உடன் அகற்றலாம் .g-0. இது அனைத்து உடனடி குழந்தைகள் நெடுவரிசைகளிலிருந்தும் எதிர்மறை marginகள் .rowமற்றும் கிடைமட்டத்தை நீக்குகிறது .padding

எட்ஜ்-டு-எட்ஜ் வடிவமைப்பு வேண்டுமா? நிரம்பி வழிவதைத் தடுக்க பெற்றோரை கைவிடவும் .containerஅல்லது .container-fluidசேர்க்கவும் .mx-0..row

நடைமுறையில், அது எப்படி இருக்கிறது என்பது இங்கே. மற்ற அனைத்து முன் வரையறுக்கப்பட்ட கட்ட வகுப்புகளுடன் (நெடுவரிசை அகலங்கள், பதிலளிக்கக்கூடிய அடுக்குகள், மறுவரிசைப்படுத்தல்கள் மற்றும் பல உட்பட) இதை நீங்கள் தொடர்ந்து பயன்படுத்தலாம் என்பதை நினைவில் கொள்ளவும்.

.col-sm-6 .col-md-8

.col-6 .col-md-4

html

<div class="row g-0 text-center">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

சாக்கடைகளை மாற்றவும்

வகுப்புகள் சாஸ் வரைபடத்தில் இருந்து கட்டமைக்கப்படுகின்றன, இது $guttersசாஸ் வரைபடத்தில் இருந்து பெறப்பட்டது $spacers.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);