ଗୁଟର୍ସ |
ଗୁଟର୍ସ ହେଉଛି ତୁମର ସ୍ତମ୍ଭ ମଧ୍ୟରେ ପ୍ୟାଡିଂ, ପ୍ରତିକ୍ରିୟାଶୀଳ ଭାବରେ ସ୍ପେସ୍ ଏବଂ ବୁଟଷ୍ଟ୍ରାପ୍ ଗ୍ରୀଡ୍ ସିଷ୍ଟମରେ ବିଷୟବସ୍ତୁକୁ ଆଲାଇନ୍ କରିବା ପାଇଁ ବ୍ୟବହୃତ |
ସେମାନେ କିପରି କାମ କରନ୍ତି |
-
ଭୂସମାନ୍ତର ଦ୍ୱାରା ସୃଷ୍ଟି ସ୍ତମ୍ଭ ବିଷୟବସ୍ତୁ ମଧ୍ୟରେ ଫାଟଗୁଡିକ
padding
| ଆମେ ପ୍ରତ୍ୟେକ ସ୍ତମ୍ଭ ଉପରେ ସେଟ୍ କରିଥାଉ, ଏବଂ ବିଷୟବସ୍ତୁକୁ ସମାନ କରିବା ପାଇଁ ପ୍ରତ୍ୟେକ ଧାଡିର ଆରମ୍ଭ ଏବଂ ଶେଷରେ ଅଫସେଟ୍ କରିବାକୁ ନକାରାତ୍ମକ ବ୍ୟବହାରpadding-right
କରୁ |padding-left
margin
-
ଗୁଟଖା
1.5rem
(24px
) ଚଉଡା ଠାରୁ ଆରମ୍ଭ ହୁଏ | ଏହା ଆମ ଗ୍ରୀଡ୍ କୁ ପ୍ୟାଡିଂ ଏବଂ ମାର୍ଜିନ୍ ସ୍ପେସର୍ ସ୍କେଲ୍ ସହିତ ମେଳ କରିବାକୁ ଅନୁମତି ଦିଏ | -
ଗୁଟରଗୁଡିକ ପ୍ରତିକ୍ରିୟାଶୀଳ ଭାବରେ ଆଡଜଷ୍ଟ ହୋଇପାରିବ | ଭୂସମାନ୍ତର ଗୁଟର, ଭୂଲମ୍ବ ଗୁଟର ଏବଂ ସମସ୍ତ ଗୁଟରକୁ ପରିବର୍ତ୍ତନ କରିବା ପାଇଁ ବ୍ରେକପଏଣ୍ଟ-ନିର୍ଦ୍ଦିଷ୍ଟ ଗୁଟର ଶ୍ରେଣୀ ବ୍ୟବହାର କରନ୍ତୁ |
ଭୂସମାନ୍ତର ଗୁଟଖା |
.gx-*
ଭୂସମାନ୍ତର ଗୁଟର ପ୍ରସ୍ଥକୁ ନିୟନ୍ତ୍ରଣ କରିବା ପାଇଁ ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରାଯାଇପାରିବ | ଯଦି ଏକ ମେଳକ ପ୍ୟାଡିଂ ଉପଯୋଗିତା ବ୍ୟବହାର କରି ଅବାଞ୍ଛିତ ଓଭରଫ୍ଲୋକୁ ଏଡାଇବା ପାଇଁ ବଡ଼ ଗୁଟରଗୁଡିକ ବ୍ୟବହୃତ ହୁଏ ତେବେ ପିତାମାତା .container
କିମ୍ବା .container-fluid
ପିତାମାତାଙ୍କୁ ସଜାଡିବାକୁ ପଡିପାରେ | ଉଦାହରଣ ସ୍ୱରୂପ, ନିମ୍ନଲିଖିତ ଉଦାହରଣରେ ଆମେ ପ୍ୟାଡିଂ ବ increased ାଇଛୁ .px-4
:
<div class="container px-4">
<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
<div class="container overflow-hidden">
<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
:
<div class="container overflow-hidden">
<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
ଭୂସମାନ୍ତର ଗୁଟର ପ୍ରସ୍ଥକୁ ନିୟନ୍ତ୍ରଣ କରିବା ପାଇଁ ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହୃତ ହୋଇପାରିବ, ନିମ୍ନଲିଖିତ ଉଦାହରଣ ପାଇଁ ଆମେ ଏକ ଛୋଟ ଗୁଟର ପ୍ରସ୍ଥ ବ୍ୟବହାର କରୁ, ତେଣୁ ରାପର୍ କ୍ଲାସ୍ ଯୋଡିବା ଆବଶ୍ୟକ ନାହିଁ |
<div class="container">
<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>
ଧାଡି ସ୍ତମ୍ଭଗୁଡିକ
ଧାଡି ସ୍ତମ୍ଭରେ ଗୁଟର୍ କ୍ଲାସ୍ ମଧ୍ୟ ଯୋଡିହେବ | ନିମ୍ନଲିଖିତ ଉଦାହରଣରେ, ଆମେ ପ୍ରତିକ୍ରିୟାଶୀଳ ଧାଡି ସ୍ତମ୍ଭ ଏବଂ ପ୍ରତିକ୍ରିୟାଶୀଳ ଗୁଟର୍ କ୍ଲାସ୍ ବ୍ୟବହାର କରୁ |
<div class="container">
<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
| ଏହା ସମସ୍ତ ତୁରନ୍ତ ଶିଶୁ ସ୍ତମ୍ଭରୁ ନକାରାତ୍ମକ margin
s .row
ଏବଂ ଭୂସମାନ୍ତର ଅପସାରଣ କରିଥାଏ |padding
ଏକ ଧାର-ଟୁ-ଡିଜାଇନ୍ ଆବଶ୍ୟକ କରନ୍ତି କି? ପିତାମାତାଙ୍କୁ ଡ୍ରପ୍ କରନ୍ତୁ .container
କିମ୍ବା .container-fluid
।
ଅଭ୍ୟାସରେ, ଏହା କିପରି ଦେଖାଯାଏ | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଆପଣ ଅନ୍ୟ ସମସ୍ତ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଗ୍ରୀଡ୍ ଶ୍ରେଣୀଗୁଡିକ ସହିତ ଏହାକୁ ବ୍ୟବହାର ଜାରି ରଖିପାରିବେ (ସ୍ତମ୍ଭ ପ୍ରସ୍ଥ, ପ୍ରତିକ୍ରିୟାଶୀଳ ସ୍ତର, ସୀମା, ଏବଂ ଅଧିକ ଅନ୍ତର୍ଭୂକ୍ତ କରି) |
<div class="row g-0">
<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,
);