شرح صفوف ومحتوى الفقرة
تتحاذى القائمة افتراضياً مع حافة البداية للزر، ولكن عندما يقع الزر في أقصى طرف الشاشة يمكنك إضافة .dropdown-menu-end لمحاذاة القائمة مع حافة النهاية ومنع قصّها، أو استخدام .dropdown-center على الحاوية لتوسيط القائمة تحت الزر تماماً.
كما يمكنك تطبيق المحاذاة المتجاوبة مثل .dropdown-menu-lg-end؛ علماً أن بوتستراب يوقف تموضع Popper الديناميكي تلقائياً عند استخدام كلاسات المحاذاة المتجاوبة ليحترم نقطة التوقف المحددة في CSS.
HTML
<div class="d-flex gap-2">
<div class="btn-group dropend">
<button type="button" data-bs-toggle="dropdown"
class="btn btn-secondary dropdown-toggle">
Dropend</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Side</a></li>
</ul>
</div>
</div>