ጐዳጉዲ

ጓተርስ ኣብ መንጎ ዓምድታትካ ዘሎ መሸፈኒ ኮይኑ፡ ኣብ ስርዓት ሽቦ ቡትስትራፕ ንትሕዝቶታት ብመልሲ ንምሃብን ንምስላጥን ዝውዕል እዩ።

ኣብዚ ገጽ

ከመይ ይሰርሑ

ጐዳጉዲ ኣብ መንጎ ትሕዝቶ ዓምዲ ዝርከቡ ክፍተታት እዮም፣ ብኣግማድ ዝፍጠሩ padding. ኣብ ነፍሲ ወከፍ ዓምዲን ነቐምጥ padding-right፣ ትሕዝቶ ንምስምማዕ ድማ ኣብ መጀመርታን መወዳእታን ነፍሲ ወከፍ መስርዕ ንዕኡ ንምምዕርራይ padding-leftኣሉታዊ ንጥቀም ።margin
ጐዳጉዲ ካብ 1.5rem( 24px) ገፊሕ ይጅምሩ። እዚ ድማ ንሽቦና ምስቲ ናይ ፓዲንግን ማርጅን ስፔሰርስን ስኬል ከነመዓራርዮ የኽእለና።
ጐዳጉዲ ብመልስታት ክስተኻኸሉ ይኽእሉ እዮም። ንኣግማድ ጐዳጉዲ፣ ቀጥታዊ ጐዳጉዲን ኩሎም ጐዳጉዲን ንምቕያር ንነጥቢ ምብታኽ ዝምልከቱ ክፍልታት ጐዳጉዲ ተጠቐም።

ልኡል ጐዳጉዲ

.gx-*ክፍልታት ነቲ ኣግማድ ስፍሓት ጐዳጉዲ ንምቁጽጻር ክጥቀሙ ይኽእሉ። እቲ .containerወይ .container-fluidወላዲ ዓበይቲ ጐዳጉዲ እውን እንተተጠቒምካ ዘይተደልየ ምፍሳስ ንምክልኻል ምትዕርራይ ከድልዮ ይኽእል እዩ፣ ዝሰማማዕ መሸፈኒ ዩቲሊቲ ብምጥቃም። ንኣብነት ኣብዚ ዝስዕብ ኣብነት ፓዲንግ ብ .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-hiddenclasses ንናይ ኣግማድ ስፍሓት ጐዳጉዲ ንምቁጽጻር ክንጥቀመሉ ንኽእል ኢና፣ ነዚ ዝስዕብ ኣብነት ዝነኣሰ ስፍሓት ጐዳጉዲ ንጥቀም፣ ስለዚ ናይ መጠቕለሊ ክፍሊ ምውሳኽ ኣየድልን እዩ ።

ብሕታዊ ዓምዲ ምዕሻግ

<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>

ጐዳጉዲ የለን

ኣብቲ ኣቐዲሙ ዝተነጸረ ናይ ሽቦ ክፍልታትና ኣብ መንጎ ዓምድታት ዝርከቡ ጐዳጉዲ ብ .g-0. እዚ ድማ ነቲ ኣሉታዊ margins ካብ ኩሎም ናይ ቀረባ ህጻናት ዓምድታትን .rowነቲ ኣግማድ ድማ የወግዶ።padding

ካብ ወሰን ናብ ወሰን ዝኸይድ ዲዛይን የድልየካ? ነቲ ወላዲ .containerወይ .container-fluid.

ብተግባር እንሆ ከመይ ይመስል። ኣስተውዕል ነዚ ምስ ኩሎም ካልኦት ኣቐዲሞም ዝተነጸሩ ናይ ሽቦ ክፍልታት (ስፍሓት ዓምዲ፣ ምላሽ ዝህቡ ደረጃታት፣ ዳግመ-ምስርዓትን ካልእን ሓዊስካ) ክትጥቀመሉ ትኽእል ኢኻ።

.ኮል-ስም-6 .ኮል-ምድ-8

.ኮል-6 .ኮል-ምድ-4

<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,
);