بوتستراب 4: كيفية تثبيت شريط التنقل العلوي ضمن الحاوية ومنع تمدده

مقدمة: تحديات شريط التنقل الثابت في بوتستراب 4

يُعد شريط التنقل (Navbar) أحد العناصر الأساسية في تصميم أي موقع ويب، ويوفر بوتستراب 4 (Bootstrap 4) مرونة كبيرة في إنشائه وتثبيته. ومع ذلك، قد يواجه المطورون تحديًا شائعًا عند استخدام فئة .navbar-fixed-top (أو ما يعادلها في الإصدارات الأحدث مثل .fixed-top)، حيث يميل شريط التنقل إلى التمدد ليشغل عرض الشاشة بالكامل، متجاهلاً حدود الحاوية الأصلية (container) التي يُفترض أن يحتوى عليها.

في هذا المقال، سنستعرض الحل الأكثر فعالية ومباشرةً لمعالجة هذه المشكلة، لضمان بقاء شريط التنقل الثابت ضمن حدود الحاوية الخاصة به، مما يحافظ على التناسق البصري لموقعك.

المشكلة: تمدد شريط التنقل الثابت خارج الحاوية

لنتخيل أن لديك بنية HTML التالية، وهي مستوحاة قليلاً من وثائق بوتستراب الرسمية، وتتضمن شريط تنقل ثابت داخل حاوية:

<div class="container">
  <nav class="navbar navbar-fixed-top navbar-inverse bg-inverse">
    <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    </button>
    <div class="collapse navbar-toggleable-md" id="navbarResponsive">
      <a class="navbar-brand" href="#">
        <img src="" width="30" height="30" class="d-inline-block align-top" alt=""> Navbar
      </a>
      <ul class="nav navbar-nav float-md-right">
        <li class="nav-item active">
          <a class="nav-link" href="#"> Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"> Link </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"> Link </a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="next"></div>
  hello
</div>

بالإضافة إلى بعض تنسيقات CSS الأساسية للعنصر التالي:

div.next {
  background-color: lightblue;
  width: 100%;
  height: 60rem;
}

عند عرض هذه البنية، قد تلاحظ أن شريط التنقل العلوي يمتد عبر كامل عرض الشاشة، بغض النظر عن عرض الحاوية الأبوية (.container)، كما يوضح الشكل التالي:

الحل الفعال: ضبط شريط التنقل باستخدام CSS

فهم سلوك شريط التنقل الافتراضي

تنص وثائق بوتستراب على أن «أشرطة التنقل ومحتوياتها تكون مرنة (fluid) بشكل افتراضي. استخدم الحاويات الاختيارية لتقييد عرضها الأفقي». ومع ذلك، عند استخدام فئات مثل .fixed-top، يتم إخراج العنصر من تدفق المستند الطبيعي، مما يجعله يتجاهل عرض الحاوية الأبوية. الحل الأسهل والأكثر فعالية هو استخدام CSS لتعيين عرض شريط التنقل مباشرةً، مع الاستفادة من خصائص التمركز.

تطبيق التعديلات الأساسية

لحل مشكلة التمدد وإبقاء شريط التنقل ضمن الحاوية، سنقوم بإضافة بعض قواعد CSS المستهدفة. هذه القواعد ستضمن أن شريط التنقل يأخذ نفس عرض الحاوية الأبوية ويظل متمركزًا بشكل صحيح:

div.next {
  background-color: lightblue;
  width: 100%;
  height: 60rem;
}

.container {
  padding: 0px; /* إزالة الحشوة الافتراضية للحاوية إذا كانت تسبب مشاكل في العرض */
}

nav.navbar {
  width: inherit; /* يجعل عرض شريط التنقل يرث عرض العنصر الأب (الحاوية) */
  top: 0%; /* يثبت الشريط في أعلى الصفحة */
  left: 50%; /* يضع حافة الشريط اليسرى في منتصف الصفحة */
  transform: translateX(-50%); /* يحرك الشريط إلى اليسار بنسبة 50% من عرضه لتمركزه */
}

دعنا نشرح هذه القواعد بالتفصيل:

• .container { padding: 0px; }: في بعض الحالات، قد يكون للحاويات حشوة (padding) افتراضية تؤثر على الحسابات. إزالتها تضمن أن الحاوية تبدأ من الحواف تمامًا، مما يمنحنا تحكمًا كاملاً في عرض الشريط.
• nav.navbar { width: inherit; }: هذه هي الخاصية الأهم هنا. تجعل عرض شريط التنقل (nav.navbar) يرث قيمة العرض من العنصر الأب المباشر له، وهو في هذه الحالة .container. هذا يضمن أن الشريط لا يتمدد خارج حدود الحاوية.
• top: 0%;: يثبت شريط التنقل في أعلى إطار العرض (viewport).
• left: 50%;: هذه الخاصية، بالاشتراك مع transform، هي مفتاح تمركز العنصر. تضع الحافة اليسرى لشريط التنقل في منتصف الشاشة.
• transform: translateX(-50%);: بعد وضع الحافة اليسرى في المنتصف، تقوم هذه الخاصية بتحريك العنصر إلى اليسار بنسبة 50% من عرضه الخاص. النتيجة النهائية هي تمركز شريط التنقل تمامًا في منتصف الحاوية الأبوية.

بإضافة هذه القواعد التي تستهدف .container و nav.navbar، سيصبح شريط التنقل الخاص بك بنفس عرض الحاوية الأبوية، وسيظهر بشكل صحيح كما في الصورة التالية:

الخلاصة التقنية

تُظهر هذه المشكلة والحل المقترح أهمية فهم كيفية تفاعل مكونات بوتستراب مع خصائص CSS الأساسية. على الرغم من أن بوتستراب يوفر فئات جاهزة للتثبيت، إلا أن التحكم الدقيق في العرض والتمركز يتطلب أحيانًا تدخلًا مباشرًا عبر CSS. استخدام width: inherit; مع تقنيات التمركز مثل left: 50%; و transform: translateX(-50%); يوفر حلاً قويًا ومرنًا للحفاظ على تناسق التصميم، ويضمن أن شريط التنقل الثابت يلتزم بحدود الحاوية المحددة، مما يعزز تجربة المستخدم ويحافظ على جمالية التصميم المتجاوب.