ගොඩවල්

සංරචක පිරිසැලසුම වෙන කවරදාටත් වඩා වේගවත් සහ පහසු කිරීමට අපගේ flexbox උපයෝගිතා මත ගොඩනගා ගන්නා කෙටිකතා සහායකයින්.

මෙම පිටුවේ

Bootstrap තුළ ඉක්මනින් සහ පහසුවෙන් පිරිසැලසුම් නිර්මාණය කිරීමට Flexbox ගුණාංග ගණනාවක් යෙදීම සඳහා Stacks කෙටිමඟක් ලබා දෙයි. සංකල්පය සහ ක්‍රියාත්මක කිරීම සඳහා සියලු ගෞරවය විවෘත මූලාශ්‍ර පයිලෝන් ව්‍යාපෘතියට හිමිවේ .

දැනුම්දීම! flexbox සමඟ ගැප් උපයෝගිතා සඳහා සහය මෑතකදී Safari වෙත එක් කරන ලදී, එබැවින් ඔබගේ අපේක්ෂිත බ්‍රවුසර සහාය සත්‍යාපනය කිරීම සලකා බලන්න. ජාල සැකැස්ම ගැටළු නොමැති විය යුතුය. තව කියවන්න .

සිරස්

.vstackසිරස් පිරිසැලසුම් නිර්මාණය කිරීමට භාවිතා කරන්න . ගොඩගැසූ අයිතම පෙරනිමියෙන් සම්පූර්ණ පළල වේ. .gap-*අයිතම අතර අවකාශය එක් කිරීමට උපයෝගිතා භාවිතා කරන්න .

පළමු අයිතමය

දෙවන අයිතමය

තුන්වන අයිතමය

html

<div class="vstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

තිරස්

.hstackතිරස් පිරිසැලසුම් සඳහා භාවිතා කරන්න . ගොඩගැසූ අයිතම පෙරනිමියෙන් සිරස් අතට කේන්ද්‍රගත වන අතර ඒවායේ අවශ්‍ය පළල පමණක් ලබා ගනී. .gap-*අයිතම අතර අවකාශය එක් කිරීමට උපයෝගිතා භාවිතා කරන්න .

පළමු අයිතමය

දෙවන අයිතමය

තුන්වන අයිතමය

html

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

ස්පේසර් වැනි තිරස් ආන්තික උපයෝගිතා භාවිතා .ms-autoකිරීම:

පළමු අයිතමය

දෙවන අයිතමය

තුන්වන අයිතමය

html

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

සහ සිරස් නීති සමඟ :

පළමු අයිතමය

දෙවන අයිතමය

තුන්වන අයිතමය

html

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">Third item</div>
</div>

උදාහරණ

.vstackබොත්තම් සහ අනෙකුත් අංග ගොඩගැසීමට භාවිතා කරන්න :

html

<div class="vstack gap-2 col-md-5 mx-auto">
  <button type="button" class="btn btn-secondary">Save changes</button>
  <button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>

පේළිගත පෝරමයක් සාදන්න .hstack:

html

<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
  <button type="button" class="btn btn-secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</button>
</div>

සාස්

.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}