নালা

গাটাৰসমূহ আপোনাৰ স্তম্ভসমূহৰ মাজৰ পেডিং, বুটষ্ট্ৰেপ গ্ৰীড ব্যৱস্থাপ্ৰণালীত বিষয়বস্তুক সঁহাৰিজনকভাৱে স্থান আৰু প্ৰান্তিককৰণ কৰিবলে ব্যৱহাৰ কৰা হয়।

এই পৃষ্ঠাত

তেওঁলোকে কেনেকৈ কাম কৰে

নালা হৈছে স্তম্ভৰ বিষয়বস্তুৰ মাজৰ ব্যৱধান, অনুভূমিক দ্বাৰা সৃষ্টি কৰা padding। আমি প্ৰতিটো স্তম্ভত padding-rightআৰু ছেট কৰোঁ , আৰু বিষয়বস্তু প্ৰান্তিককৰণ কৰিবলৈ প্ৰতিটো শাৰীৰ আৰম্ভণি আৰু শেষত সেইটো অফছেট কৰিবলৈ ঋণাত্মক ব্যৱহাৰ কৰো।padding-leftmargin
নালাবোৰ 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। ই সকলো তাৎক্ষণিক শিশু স্তম্ভৰ পৰা ঋণাত্মক margins .rowআৰু অনুভূমিক আঁতৰায় ।padding

এজ-টু-এজ ডিজাইনৰ প্ৰয়োজন? অভিভাৱক .containerবা ড্ৰপ কৰক আৰু অভাৰফ্ল' ৰোধ কৰিবলৈ যোগ .container-fluidকৰক ।.mx-0.row

কাৰ্যক্ষেত্ৰত ইয়াত কেনেকুৱা দেখা যায়। টোকা আপুনি ইয়াক অন্য সকলো পূৰ্বনিৰ্ধাৰিত গ্ৰীড শ্ৰেণীৰ সৈতে ব্যৱহাৰ কৰি থাকিব পাৰিব (স্তম্ভৰ প্ৰস্থ, প্ৰতিক্ৰিয়াশীল স্তৰসমূহ, পুনৰ ক্ৰমসমূহ, আৰু অধিক অন্তৰ্ভুক্ত কৰি)।

.কল-এছএম-৬ .কল-এমডি-৮

.কল-৬ .কল-এমডি-৪

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>

নালাবোৰ সলনি কৰক

ক্লাছসমূহ Sass মেপৰ পৰা নিৰ্মাণ কৰা হয় $guttersযিটো Sass মেপৰ পৰা উত্তৰাধিকাৰী সূত্ৰে পোৱা যায় $spacers।

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