استفسار عن تخصيص navbar في bootstrap

محمود سعداوي2 · 2 ديسمبر 2022

السلام عليكم.

في الكود التالي قمت بإنشاء navnar بواسطة bootstrap.

<nav className="navbar navbar-expand-lg navbar-light">
          <div className="container-fluid">
            <h4 className="Logo">Logo</h4>
            <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse navbar-collapse" id="navbarSupportedContent">
              
              <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                <li className="nav-item">
                <button type="button" className="btn btn-primary">My Favorites <span>0</span></button>
                </li>
                <li className="nav-item">
                <button type="button" className="btn btn-primary">My Cart <span>0</span></button>
                </li>
              </ul>
              
              <form className="d-flex">
                <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
                <button className="btn btn-outline-primary" type="submit">Search</button>
              </form>

            </div>
          </div>
        </nav>

النتيجة كانت كالتالي:

Capture.JPG.beb6894e565154a7f501fbc256f60da3.JPG

قمت بإضافة الخاصية " d-flex justify-content-between" قصد التفريق بين العناصر لكن بدون جدوى.

(ما أريده هو أن تكون Logo على اليسار search في الوسط و buttons على اليمين)

شكرا لكم.

Ahmed Sadek Elamine Touahria · 2 ديسمبر 2022

نعم يمكنك تخصيص أكواد bootstrap كما تشاء ، جرب هذا الكود وتأكد من أنك تستعمل النسخة 5 من bootstrap

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">LOGO</a>
            <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

محمود سعداوي2 · 3 ديسمبر 2022

بتاريخ 18 ساعات قال Ahmed Sadek:

نعم يمكنك تخصيص أكواد bootstrap كما تشاء ، جرب هذا الكود وتأكد من أنك تستعمل النسخة 5 من bootstrap


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">LOGO</a>
            <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

أنا أردت تغيير هذه navbar صحيح مثل الصورة التي أرفقتها و لكن Logo على اليسار search في الوسط و buttons على اليمين

استفسار عن تخصيص navbar في bootstrap

السؤال

محمود سعداوي2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

2 أجوبة على هذا السؤال

Recommended Posts

Ahmed Sadek Elamine Touahria

رابط هذا التعليق

شارك على الشبكات الإجتماعية

محمود سعداوي2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية