ቁልል

የመለዋወጫ አቀማመጥን ከመቼውም ጊዜ በበለጠ ፈጣን እና ቀላል ለማድረግ በFlexbox መገልገያዎቻችን ላይ የሚገነቡ አጭር የእጅ ረዳቶች።

በዚህ ገጽ ላይ

ቁልል በፍጥነት እና በቀላሉ በBootstrap ውስጥ አቀማመጦችን ለመፍጠር በርካታ የflexbox ንብረቶችን ተግባራዊ ለማድረግ አቋራጭ መንገድ ይሰጣሉ። ለጽንሰ-ሃሳቡ እና ትግበራ ሁሉም ምስጋናዎች ወደ ክፍት ምንጭ የፒሎን ፕሮጀክት ይሄዳል ።

ቀና በል! ከ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;
}