ବ୍ୟବଧାନ

ଏକ ଉପାଦାନର ରୂପକୁ ପରିବର୍ତ୍ତନ କରିବା ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ସର୍ଟହାଣ୍ଡ୍ ପ୍ରତିକ୍ରିୟାଶୀଳ ମାର୍ଜିନ୍ ଏବଂ ପ୍ୟାଡିଂ ୟୁଟିଲିଟି କ୍ଲାସର ଏକ ବ୍ୟାପକ ସୀମା ଅନ୍ତର୍ଭୁକ୍ତ କରେ |

ଏହା କିପରି କାମ କରେ |

ଏକ ଉପାଦାନ କିମ୍ବା ଏହାର ପାର୍ଶ୍ of ର ଏକ ଉପସେଟକୁ ପ୍ରତିକ୍ରିୟାଶୀଳ-ଅନୁକୂଳ marginକିମ୍ବା ମୂଲ୍ୟ ନ୍ୟସ୍ତ କରନ୍ତୁ | paddingବ୍ୟକ୍ତିଗତ ଗୁଣ, ସମସ୍ତ ଗୁଣ, ଏବଂ ଭୂଲମ୍ବ ଏବଂ ଭୂସମାନ୍ତର ଗୁଣ ପାଇଁ ସମର୍ଥନ ଅନ୍ତର୍ଭୂକ୍ତ କରେ | କ୍ଲାସଗୁଡିକ ଏକ ଡିଫଲ୍ଟ ସାସ୍ ମାନଚିତ୍ରରୁ ନିର୍ମିତ .25rem|3rem

ଟିପ୍ପଣୀ |

ବ୍ୟବଧାନ ଉପଯୋଗୀତା ଯାହା ସମସ୍ତ ବ୍ରେକପଏଣ୍ଟ ପାଇଁ ପ୍ରଯୁଜ୍ୟ, ସେଠାରୁ xsକ xlbreak ଣସି ବ୍ରେକପଏଣ୍ଟ ସଂକ୍ଷିପ୍ତକରଣ ନାହିଁ | ଏହାର କାରଣ ହେଉଛି ସେହି ଶ୍ରେଣୀଗୁଡ଼ିକ min-width: 0ଉପର ଏବଂ ଉପର ପ୍ରୟୋଗ କରାଯାଏ, ଏବଂ ଏହିପରି ଏକ ମିଡିଆ ଜିଜ୍ଞାସା ଦ୍ୱାରା ବନ୍ଧା ନୁହେଁ | ଅବଶିଷ୍ଟ ବ୍ରେକପଏଣ୍ଟଗୁଡ଼ିକ, ତଥାପି, ଏକ ବ୍ରେକପଏଣ୍ଟ ସଂକ୍ଷିପ୍ତକରଣ ଅନ୍ତର୍ଭୂକ୍ତ କରେ |

ପାଇଁ, ଏବଂ , ପାଇଁ , ଏବଂ {property}{sides}-{size}ପାଇଁ ଫର୍ମାଟ୍ ବ୍ୟବହାର କରି ଶ୍ରେଣୀଗୁଡ଼ିକ ନାମିତ |xs{property}{sides}-{breakpoint}-{size}smmdlgxl

ଯେଉଁଠାରେ ସମ୍ପତ୍ତି ହେଉଛି ଗୋଟିଏ:

• m- ସେଟ୍ ହୋଇଥିବା କ୍ଲାସ୍ ପାଇଁ |margin
• p- ସେଟ୍ ହୋଇଥିବା କ୍ଲାସ୍ ପାଇଁ |padding

ଯେଉଁଠାରେ ପାର୍ଶ୍ୱଗୁଡିକ ଗୋଟିଏ:

• t- କ୍ଲାସ୍ ପାଇଁ ଯାହା ସେଟ୍ margin-topକିମ୍ବା |padding-top
• b- କ୍ଲାସ୍ ପାଇଁ ଯାହା ସେଟ୍ margin-bottomକିମ୍ବା |padding-bottom
• l- କ୍ଲାସ୍ ପାଇଁ ଯାହା ସେଟ୍ margin-leftକିମ୍ବା |padding-left
• r- କ୍ଲାସ୍ ପାଇଁ ଯାହା ସେଟ୍ margin-rightକିମ୍ବା |padding-right
• x- କ୍ଲାସ୍ ପାଇଁ ଯାହା ଉଭୟ ସେଟ୍ କରେ *-leftଏବଂ |*-right
• y- କ୍ଲାସ୍ ପାଇଁ ଯାହା ଉଭୟ ସେଟ୍ କରେ *-topଏବଂ |*-bottom
• ଖାଲି - ଶ୍ରେଣୀଗୁଡ଼ିକ ପାଇଁ ଯାହା ଉପାଦାନର ସମସ୍ତ 4 ପାର୍ଶ୍ୱରେ ସେଟ୍ marginକରେ padding|

ଯେଉଁଠାରେ ଆକାର ହେଉଛି:

• 0- କ୍ଲାସ୍ ପାଇଁ ଯାହା ଏହାକୁ ଅପସାରଣ କରେ marginକିମ୍ବା paddingଏହାକୁ ସେଟ୍ କରି |0
• 1- (ଡିଫଲ୍ଟ ଭାବରେ) marginକିମ୍ବା ସେଟ୍ କରୁଥିବା ଶ୍ରେଣୀଗୁଡ଼ିକ paddingପାଇଁ |$spacer * .25
• 2- (ଡିଫଲ୍ଟ ଭାବରେ) marginକିମ୍ବା ସେଟ୍ କରୁଥିବା ଶ୍ରେଣୀଗୁଡ଼ିକ paddingପାଇଁ |$spacer * .5
• 3- (ଡିଫଲ୍ଟ ଭାବରେ) marginକିମ୍ବା ସେଟ୍ କରୁଥିବା ଶ୍ରେଣୀଗୁଡ଼ିକ paddingପାଇଁ |$spacer
• 4- (ଡିଫଲ୍ଟ ଭାବରେ) marginକିମ୍ବା ସେଟ୍ କରୁଥିବା ଶ୍ରେଣୀଗୁଡ଼ିକ paddingପାଇଁ |$spacer * 1.5
• 5- (ଡିଫଲ୍ଟ ଭାବରେ) marginକିମ୍ବା ସେଟ୍ କରୁଥିବା ଶ୍ରେଣୀଗୁଡ଼ିକ paddingପାଇଁ |$spacer * 3
• auto- କ୍ଲାସ୍ ପାଇଁ ଯାହା marginଅଟୋକୁ ସେଟ୍ କରେ |

(ସାସ୍ ମାନଚିତ୍ର ଭେରିଏବଲ୍ ରେ ଏଣ୍ଟ୍ରି ଯୋଗ କରି ଆପଣ ଅଧିକ ଆକାର ଯୋଡିପାରିବେ $spacers|)

ଉଦାହରଣଗୁଡିକ

ଏହି ଶ୍ରେଣୀର କିଛି ପ୍ରତିନିଧୀ ଉଦାହରଣ ଏଠାରେ ଅଛି:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

ଭୂସମାନ୍ତର କେନ୍ଦ୍ର

ଅତିରିକ୍ତ ଭାବରେ, ବୁଟଷ୍ଟ୍ରାପ୍ ଭୂସମାନ୍ତର ମାର୍ଜିନ୍ ସେଟ୍ କରି ଭୂସମାନ୍ତର .mx-autoକେନ୍ଦ୍ରିତ ଫିକ୍ସଡ୍-ଓସାର ବ୍ଲକ୍ ସ୍ତରର ବିଷୟବସ୍ତୁ ପାଇଁ ଏକ ଶ୍ରେଣୀ ଅନ୍ତର୍ଭୂକ୍ତ କରେ |display: blockwidthauto

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

ନକାରାତ୍ମକ ମାର୍ଜିନ୍ |

CSS ରେ, marginଗୁଣଗୁଡିକ ନକାରାତ୍ମକ ମୂଲ୍ୟଗୁଡିକ ବ୍ୟବହାର କରିପାରିବ ( paddingପାରିବ ନାହିଁ) | 4.2 ସୁଦ୍ଧା , ଆମେ ଉପରେ ତାଲିକାଭୁକ୍ତ ପ୍ରତ୍ୟେକ ଶୂନ୍ୟ ନଥିବା ପୂର୍ଣ୍ଣ ଆକାର ପାଇଁ ନକାରାତ୍ମକ ମାର୍ଜିନ୍ ଉପଯୋଗିତା ଯୋଡିଛୁ (ଯଥା ,,,, 1) | ବ୍ରେକ୍ ପଏଣ୍ଟଗୁଡିକରେ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭ ଗୁଟର୍ କଷ୍ଟୋମାଇଜ୍ କରିବା ପାଇଁ ଏହି ଉପଯୋଗୀତା ଆଦର୍ଶ |2345

ବାକ୍ୟବିନ୍ୟାସ ଡିଫଲ୍ଟ, ପଜିଟିଭ୍ ମାର୍ଜିନ୍ ଉପଯୋଗିତା ସହିତ ସମାନ, କିନ୍ତୁ nଅନୁରୋଧ କରାଯାଇଥିବା ଆକାର ପୂର୍ବରୁ ଯୋଗ ସହିତ | ଏଠାରେ ଏକ ଉଦାହରଣ ଶ୍ରେଣୀ ଅଛି ଯାହା ଏହାର ବିପରୀତ .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

mdମଧ୍ୟମ ( ) ବ୍ରେକପଏଣ୍ଟ ଏବଂ ଉପରେ ବୁଟଷ୍ଟ୍ରାପ୍ ଗ୍ରୀଡ୍ କଷ୍ଟୋମାଇଜ୍ କରିବାର ଏକ ଉଦାହରଣ ଏଠାରେ ଅଛି | ଆମେ .colପ୍ୟାଡିଂ ସହିତ ବୃଦ୍ଧି କରିଛୁ .px-md-5ଏବଂ ତା’ପରେ .mx-md-n5ପିତାମାତାଙ୍କ ସହିତ ଏହାକୁ ପ୍ରତିରୋଧ କରିଛୁ .row|

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>