شرح صفوف ومحتوى الفقرة
كثيراً ما تحتاج في النماذج العملية إلى لصق رمز عملة $، أو علامة حساب @، أو نطاق بريد ثابت @company.com مباشرة بحافة حقل النص بحيث يبدوان كقطعة واحدة متصلة. يوفر Bootstrap 5 لهذا الغرض الحاوية المرنة .input-group ببنية مسطحة مبسطة للغاية بعد أن ألغى نهائياً الحاويتين الوسيطتين القديمتين من الإصدار الرابع.
كل ما عليك فعله الآن هو وضع عنصر الإضافة النصية <span class="input-group-text"> وحقل .form-control كأبناء مباشرين جنباً إلى جنب داخل .input-group، وسيتولى بوتستراب تصفير الزوايا الداخلية المتلاقية تلقائياً. ضع دائماً عنصر <label class="form-label"> خارج .input-group وليس بداخله.
HTML
<div class="input-group mb-3">
<span class="input-group-text" id="atAddon">@</span>
<input type="text" class="form-control"
placeholder="username" aria-describedby="atAddon">
</div>
<div class="input-group flex-nowrap">
<span class="input-group-text">https://</span>
<input type="text" class="form-control" value="site.io">
</div>