मुझे अपनी सामग्री को बूटस्ट्रैप एनएवी-बार में केंद्रित करने में समस्या हो रही है। मैं बूटस्ट्रैप 4 का उपयोग कर रहा हूं। मैंने कई पोस्ट पढ़ी हैं, लेकिन बूटस्ट्रैप 4 या उपयोग की जाने वाली विधियां मेरे कोड के साथ काम नहीं करेंगी! मैं वास्तव में निराश हूं, इसलिए यह मेरी आखिरी धारणा की तरह है। किसी भी सहायता की सराहना की जाएगी!

  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav justify-content-center">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Shopping</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">News</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Help</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact Us</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
0
Mahmoud Khosravi 14 जिंदा 2021, 18:29

1 उत्तर

सबसे बढ़िया उत्तर

आपको nav टैग के बच्चों को div में कक्षाओं के साथ लपेटना चाहिए: mx-auto and d-flex पूरी तरह से केंद्रित नावबार प्राप्त करने के लिए।

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="mx-auto d-flex">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Shopping</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">News</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Help</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact Us</a>
          </li>
        </ul>
      </div>
      </div>
    </nav>
  </div>

देखें codeply

2
koder613 14 जिंदा 2021, 19:33
धन्यवाद, नेवबार-टॉगलर काम क्यों नहीं कर रहा था, stackoverflow.com/questions/65723185/…
 – 
Mahmoud Khosravi
14 जिंदा 2021, 19:49