ଗୁଟର୍ସ |

ଗୁଟର୍ସ ହେଉଛି ତୁମର ସ୍ତମ୍ଭ ମଧ୍ୟରେ ପ୍ୟାଡିଂ, ପ୍ରତିକ୍ରିୟାଶୀଳ ଭାବରେ ସ୍ପେସ୍ ଏବଂ ବୁଟଷ୍ଟ୍ରାପ୍ ଗ୍ରୀଡ୍ ସିଷ୍ଟମରେ ବିଷୟବସ୍ତୁକୁ ଆଲାଇନ୍ କରିବା ପାଇଁ ବ୍ୟବହୃତ |

ଏହି ପୃଷ୍ଠାରେ |

ସେମାନେ କିପରି କାମ କରନ୍ତି |

ଭୂସମାନ୍ତର ଦ୍ୱାରା ସୃଷ୍ଟି ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ ମଧ୍ୟରେ ଫାଟଗୁଡିକ padding| ଆମେ ପ୍ରତ୍ୟେକ ସ୍ତମ୍ଭରେ ସେଟ୍ କରିଥାଉ , padding-rightଏବଂ ବିଷୟବସ୍ତୁକୁ ସମାନ କରିବା ପାଇଁ ପ୍ରତ୍ୟେକ ଧାଡିର ଆରମ୍ଭ ଏବଂ ଶେଷରେ ଅଫସେଟ୍ କରିବାକୁ padding-leftନକାରାତ୍ମକ ବ୍ୟବହାର କରୁ |margin
ଗୁଟଖା 1.5rem( 24px) ଚଉଡା ଠାରୁ ଆରମ୍ଭ ହୁଏ | ଏହା ଆମ ଗ୍ରୀଡ୍ କୁ ପ୍ୟାଡିଂ ଏବଂ ମାର୍ଜିନ୍ ସ୍ପେସର୍ ସ୍କେଲ୍ ସହିତ ମେଳ କରିବାକୁ ଅନୁମତି ଦିଏ |
ଗୁଟରଗୁଡିକ ପ୍ରତିକ୍ରିୟାଶୀଳ ଭାବରେ ଆଡଜଷ୍ଟ ହୋଇପାରିବ | ଭୂସମାନ୍ତର ଗୁଟର, ଭୂଲମ୍ବ ଗୁଟର ଏବଂ ସମସ୍ତ ଗୁଟରକୁ ପରିବର୍ତ୍ତନ କରିବା ପାଇଁ ବ୍ରେକପଏଣ୍ଟ-ନିର୍ଦ୍ଦିଷ୍ଟ ଗୁଟର ଶ୍ରେଣୀ ବ୍ୟବହାର କରନ୍ତୁ |

ଭୂସମାନ୍ତର ଗୁଟଖା |

.gx-*ଭୂସମାନ୍ତର ଗୁଟର ପ୍ରସ୍ଥକୁ ନିୟନ୍ତ୍ରଣ କରିବା ପାଇଁ ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରାଯାଇପାରିବ | ଯଦି ଏକ ମେଳକ ପ୍ୟାଡିଂ ଉପଯୋଗିତା ବ୍ୟବହାର କରି ଅବାଞ୍ଛିତ ଓଭରଫ୍ଲୋକୁ ଏଡାଇବା ପାଇଁ ବଡ଼ ଗୁଟରଗୁଡିକ ବ୍ୟବହୃତ ହୁଏ ତେବେ ପିତାମାତା .containerକିମ୍ବା .container-fluidପିତାମାତାଙ୍କୁ ସଜାଡିବାକୁ ପଡିପାରେ | ଉଦାହରଣ ସ୍ୱରୂପ, ନିମ୍ନଲିଖିତ ଉଦାହରଣରେ ଆମେ ପ୍ୟାଡିଂ ବ increased ାଇଛୁ .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>

କ No ଣସି ଗୁଟଖା ନାହିଁ |

ଆମର ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଗ୍ରୀଡ୍ ଶ୍ରେଣୀର ସ୍ତମ୍ଭ ମଧ୍ୟରେ ଥିବା ଗୁଟଖାଗୁଡ଼ିକୁ ଅପସାରଣ କରାଯାଇପାରିବ .g-0| ଏହା ସମସ୍ତ ତୁରନ୍ତ ଶିଶୁ ସ୍ତମ୍ଭରୁ ନକାରାତ୍ମକ margins .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,
);