बूटस्ट्रैप 4 दाईं ओर नावबार आइटम संरेखित करें

Question

मैं एक नावबार आइटम को दाईं ओर कैसे संरेखित करूं?

मैं लॉगिन और दाईं ओर रजिस्टर करना चाहता हूं। लेकिन मैं जो कुछ भी कोशिश करता हूं वह काम नहीं करता है।

यही मैंने अब तक कोशिश की है:

• <div><ul>श्रद्धांजलि के साथ आसपास :style="float: right"
• <div><ul>श्रद्धांजलि के साथ आसपास :style="text-align: right"
• <li>टैग पर उन दो चीजों की कोशिश की
• उन सभी चीजों को फिर !importantसे अंत में जोड़ने की कोशिश की
• बदल nav-itemकरने nav-rightमें<li>
• में एक pull-sm-rightवर्ग जोड़ा गया<li>
• में एक align-content-endवर्ग जोड़ा गया<li>

यह मेरा कोड है:

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
      <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav " >
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
  @yield('content')
</div>

Comments

Navbars को फ्लेक्सबॉक्स के साथ अल्फा 6 वर्जन से बनाया गया है।

— अधिकतम

हां, तो मुझे इसे सही करने के लिए संरेखित करने के लिए क्या करना है। मैंने पहले ही कुछ फ्लेक्सबॉक्स चीजों को बिना किसी भाग्य के आज़माया है। : /

— ल्यूक वूइजिस्टर

Answer 1

बूटस्ट्रैप 4 में कई अलग-अलग तरीके हैं जो नेवबार आइटम को संरेखित करते हैं । float-rightकाम नहीं करेगा क्योंकि नावबार अब है flexbox।

आप 1 (बाएं) mr-autoपर ऑटो राइट मार्जिन के लिए उपयोग कर सकते हैं । navbar-navवैकल्पिक रूप से , 2 वें (दाएं) ml-autoपर इस्तेमाल किया जा सकता है , या यदि आपके पास सिर्फ एक है ।navbar-navnavbar-nav

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
            <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="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="{{ url('/login') }}">Login</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ url('/register') }}">Register</a>
            </li>
        </ul>
    </div>
</nav>

https://codeply.com/go/P0G393rzfm

फ्लेक्सबॉक्स बर्तन भी हैं। इस मामले में, आपके पास 2 हैंnavbar-nav रों है, इसलिए justify-content-betweenमें navbar-collapseउन दोनों के बीच भी अंतरिक्ष में काम करेगा,

 <div class="navbar-collapse collapse justify-content-between">
     <ul class="navbar-nav mr-auto">
               ..
     </ul>
     <ul class="navbar-nav">
           ..
     </ul>
 </div>

---

बूटस्ट्रैप 4.0 और नए के लिए अद्यतन करें

बूटस्ट्रैप 4 बीटा के रूप में, ml-autoअभी भी आइटम को दाईं ओर धकेलने का काम करेगा। बस navbar-toggleable-कक्षाओं को बदल दिया गया है के बारे में पता होना चाहिएnavbar-expand-*

बूटस्ट्रैप 4 के लिए अपडेट किया गया नावबार सही

---

एक और लगातार बूटस्ट्रैप 4 नवबार सही संरेखण परिदृश्य में दाईं ओर एक बटन शामिल होता है जो मोबाइल ढहने वाली नौसेना के बाहर रहता है ताकि इसे हमेशा सभी चौड़ाई पर दिखाया जाए।

राइट एलाइन बटन जो हमेशा दिखाई देता है

---

संबंधित: बूटस्ट्रैप नवबार बाईं, केंद्र या दाईं ओर संरेखित आइटम के साथ

Comments

mr-autoकाम नहीं करता है अगर सही-सबसे आइटम एक है dropdown। ड्रॉपडाउन आइटम पृष्ठ के दाहिने किनारे पर फैल जाता है।

— ईज एर्सोज़

यह काम करता है: codeply.com/go/P0G393rzfm - मुद्दा यह नहीं mr-autoहै कि सवाल सही काम करने के बारे में है जो काम करता है। एक नया प्रश्न पोस्ट करें यदि आपको ड्रॉपडाउन के साथ चिंता है, लेकिन आप इस मुद्दे का सबसे अधिक उल्लेख कर रहे हैं: stackoverflow.com/questions/43867258/…

— Zim

आप .dropdown-menu-rightनावबार में दाएं-संरेखित ड्रॉपडाउन को भी जोड़ सकते हैं । ऐसा नहीं करने पर कुछ निश्चित चौड़ाई में गिरावट का सामना करना पड़ सकता है।

— rybo111

@ZimSystem आपके उत्तर के लिए धन्यवाद। मैं यहां पर आपके जवाब का अनुसरण कर रहा हूं। stackoverflow.com/questions/19733447/… । मेरा एक प्रश्न है कि मैं बाईं ओर होने के लिए एक आइटम और दाईं ओर एक आइटम कैसे प्राप्त कर सकता हूं?

— लोकेश पांडेय

में codeply.com/go/P0G393rzfm , आप बाईं तरफ के एक उल और दाईं तरफ एक उल दिखाया है। यह पहले वाले के लिए mr-auto जोड़कर हासिल किया गया था । लेकिन क्या होगा अगर मेरे पास केवल एक उल है? मैं सिर्फ एक दूसरे को दाईं ओर संरेखित करने के लिए एक खाली उल पैदा नहीं करना चाहता।

— संतोष कुमार

Answer 2

मेरे मामले में, मैं नेविगेशन बटन / विकल्पों में से सिर्फ एक सेट चाहता था और पाया कि यह काम करेगा:

<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Sign Out</a>
    </li>
  </ul>
</div>

तो, आप justify-content-endडिव में जोड़ेंगे और mr-autoसूची में छोड़ देंगे ।

यहाँ एक कार्य उदाहरण है ।

Comments

@numediaweb ओपी उदाहरण में, वह नौसेना के भीतर दो तत्वों का उपयोग करता है, एक बाएं और एक दाएं संरेखित करता है; जहां मैंने केवल एक का उपयोग किया और इसे दाईं ओर संरेखित किया। यह सही उत्तर नहीं है, लेकिन सवाल के थोड़े बदलाव के जवाब के रूप में यह मददगार है;)

— क्रेग वैन टोनर

यह एक एकल नावबार-नौसेना के लिए काम करता है, लेकिन इस mr-autoविधि का उपयोग बूटस्ट्रैप डॉक्स में किया जाता है ।

— ज़िम

mr-autoडॉक्स में उपयोग किया जाता है, लेकिन बाईं ओर आइटम संरेखित करने के लिए नहीं। यह उत्तर इस लेख में उल्लिखित शब्द के अनुसार

— qwaz

सवाल यह है कि क्या आप लिंक की 2 सूची को संरेखित करने की कोशिश कर रहे हैं या 1. यदि सिर्फ 1, आपका उत्तर काम करता है और मेरे लिए बहुत उपयोगी था। धन्यवाद!

— नंगे पांव

यह मेरे लिए काम करता है, लेकिन मुझे नहीं पता कि इस उत्तर के ऊपर कोई काम क्यों नहीं करता है।

— सुहैल अख्तर

Answer 3

उन लोगों के लिए जो अभी भी बीएस 4 में इस मुद्दे से जूझ रहे हैं, बस नीचे दिए गए कोड की कोशिश करें -

<ul class="navbar-nav ml-auto">

Comments

नहीं - जो सब कुछ सही करने के लिए संरेखित करता है। सवाल कहता है कि वह केवल एक आइटम को दाईं ओर संरेखित करना चाहता है।

— NickG

आधिकारिक डॉक की जाँच करें कि m*-autoयह सामग्री को बाएं या दाएं पर निर्भर करता है जहां आप कक्षा

— लगाते हैं

@PierredeLESPINAY, हां ml-autoकंटेंट को सबसे सही स्थिति में पहुंचाता है, लेकिन मुझे आश्चर्य है कि मैं mr-0नौकरी क्यों नहीं कर सकता?

— एवोकैडो

Answer 4

बूटस्ट्रैप 4 पर

यदि आप अपने बाईं ओर ब्रांड को संरेखित करना चाहते हैं और सभी नावबार-आइटम को दाईं ओर, डिफ़ॉल्ट mr-autoको बदलते हैंml-auto

<ul class="navbar-nav ml-auto">

Answer 5

पर Bootsrap 4.0.0-beta.2 , यहां सूचीबद्ध किसी भी उत्तर ने मेरे लिए काम नहीं किया। अंत में, बूटस्ट्रैप साइट ने मुझे इसका समाधान दिया, न कि इसके डॉक्टर के माध्यम से बल्कि इसके पृष्ठ स्रोत कोड के माध्यम से ...

Getbootstrap.com navbar-navनिम्नलिखित वर्ग की सहायता से उनके अधिकार को संरेखित करता है ml-md-auto:।

Comments

मेरे लिए खूबसूरती से काम किया। और कुछ नहीं किया।

— मारिया कैंपबेल

Answer 6

के ml-autoबजाय औचित्य-सामग्री-अंत mr-autoलागू करने के बाद का उपयोग करेंnavul

Answer 7

आइटम को दाईं ओर ले जाने के लिए इस कोड का उपयोग करें।

<div class="collapse navbar-collapse justify-content-end">

Comments

जब आप एक ढह चुके मेनू में काम नहीं करेंगे, हालांकि, एमएल-ऑटो के साथ यह अभी भी काम करेगा क्योंकि जब मेनू ढह जाता है, तो <li> आइटम अभी भी 100% चौड़ाई लेते हैं इसलिए कोई मार्जिन लागू नहीं किया जाएगा।

— रयान एस

Answer 8

यदि आप चाहते हैं कि होम, फीचर्स और मूल्य निर्धारण आपके तुरंत बाद बाईं ओर हो nav-brand, और फिर लॉगिन करें और दाईं ओर रजिस्टर करें और फिर दो सूचियों को लपेटें <div>और उपयोग करें .justify-content-between:

<div class="collapse navbar-collapse justify-content-between">
<ul>....</ul>
<ul>...</ul>
</div>

Answer 9

बस इसमें mr-autoक्लास जोड़ें ul:

<ul class="nav navbar-nav mr-auto">

यदि आपके पास दोनों ओर मेनू सूची है, तो आप कुछ इस तरह से कर सकते हैं:

<ul class="navbar-nav mr-auto">
  <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 disabled" href="#">Disabled</a>
  </li>
</ul>
<ul class="navbar-nav ml-auto">
  <li class="nav-item active">
    <a class="nav-link" href="#">left 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">left 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">left disable</a>
  </li>
</ul>

Answer 10

फ्लेक्स-पंक्ति-रिवर्स क्लास का उपयोग करें

<nav class="navbar navbar-toggleable-md navbar-light">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
          aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">
            <i class="fa fa-hospital-o fa-2x" aria-hidden="true"></i>
        </a>
        <div class="collapse navbar-collapse flex-row-reverse" id="navbarNavAltMarkup">
            <ul class="navbar-nav">
                <li><a class="nav-item nav-link active" href="#" style="background-color:#666">Home <span class="sr-only">(current)</span></a</li>
                <li><a class="nav-item nav-link" href="#">Doctors</a></li>
                <li><a class="nav-item nav-link" href="#">Specialists</a></li>
                <li><a class="nav-item nav-link" href="#">About</a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 11

यह बूस्टर में थोड़ा बदलाव है। नावबार को दाईं ओर संरेखित करने के लिए, आपको केवल दो बदलाव करने होंगे। वो हैं:

1. में navbar-navवर्ग जोड़ने w-100के रूप में navbar-nav w-100100 के रूप में चौड़ाई बनाने के लिए
2. nav-item dropdownवर्ग में ऑटो के रूप में छोड़ दिया मार्जिन बनाने के लिए के ml-autoरूप में जोड़ें nav-item dropdown ml-auto।

अगर आपको समझ में नहीं आया, तो कृपया उस छवि का संदर्भ लें, जो मैंने इससे जुड़ी है।

कोडपेन लिंक

पूर्ण स्रोत कोड

<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="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav w-100">
      <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown ml-auto">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>  
  </div>
</nav>

Answer 12

बूटस्ट्रैप 4.3.1 के लिए, मैं नौसेना-गोलियों का उपयोग कर रहा था और इसके अलावा मेरे लिए कुछ भी काम नहीं किया गया था:

    <ul class="nav nav-pills justify-content-end ml-auto">
    <li ....</li>
    </ul>

Answer 13

बूटस्ट्रैप v4.3 में सिर्फ जोड़ने ml-autoमें <ul class="navbar-nav"> उदाहरण के लिए:<ul class="navbar-nav ml-auto">

Answer 14

मैं कोणीय 4 (v.4.0.0) और एनजी-बूटस्ट्रैप (बूटस्ट्रैप 4) चला रहा हूं। यह कोड सभी प्रासंगिक नहीं होगा, लेकिन उम्मीद है कि लोग चुन सकते हैं और क्या काम कर सकते हैं। मेरे सामान को सही ठहराने, ठीक से ढहने और मेरी Google (OAuth का उपयोग करते हुए) प्रोफ़ाइल चित्र से ड्रॉपडाउन लागू करने के लिए एक समाधान खोजने के लिए मुझे कुछ समय लगा।

<div id="header" class="header">
  <nav class="navbar navbar-toggleable-sm navbar-inverse bg-faded fixed-top">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <a class="navbar-brand" href="#">
          <img alt='Brand' src='../assets/images/logo-white.png' class='navbar-logo-img d-inline-block align-top '>
          <span class="navbar-logo-text">Oncoscape</span>
        </a>
    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <ul class="navbar-nav float-left">
        <a class="navbar-items nav-item nav-link active " *ngIf='authenticated' (click)='goDashboard()'>
          <span class="fa fa-dashboard"></span>Dashboard
        </a>
        <a class="nav-item nav-link navbar-items active" href="http://resources.sttrcancer.org/oncoscape-contact">
          <span class="fa fa-comments"></span>Feedback
        </a>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img *ngIf='user && authenticated'  class="navbar-pic" src={{user.thumbnail}} alt="Smiley face">
          </a>
          <div *ngIf='user && authenticated' class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" (click)="toProfile()">Account</a>
            <div class="dropdown-item">
              <app-login></app-login>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>
<router-outlet></router-outlet>

Answer 15

बूटस्ट्रैप 4 बीटा के लिए, दाईं ओर संरेखित तत्वों के साथ नमूना नावबार है:

<div id="app" class="container">
  <nav class="navbar navbar-expand-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav mr-auto">
      <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
</div>

Answer 16

बूटस्ट्रैप फ्लेक्स बॉक्स का उपयोग करने से हमें आपके नेविगेशन तत्व के प्लेसमेंट और संरेखण को नियंत्रित करने में मदद मिलती है। mr-auto को जोड़ने से ऊपर की समस्या के लिए यह एक बेहतर उपाय है।

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav mr-auto">
      <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav  " >
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
  @yield('content')
</div>

अन्य प्लेसमेंट में शामिल हो सकते हैं

fixed- top
    fixed bottom
    sticky-top

Answer 17

बीएस के लिए काम करने का उदाहरण v4.0.0-beta.2:

<body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav mr-auto">
          <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="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricingg</a>
          </li>
        </ul>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
          </li>
        </ul>
      </div>
    </nav>


    <div class="container-fluid">
      container content
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  </body>

Answer 18

यदि उपरोक्त सभी विफल होते हैं, तो मैंने सीएसएस में नावबार वर्ग में 100% चौड़ाई जोड़ दी। तब तक mr auto 4.1 का उपयोग कर इस परियोजना पर मेरे लिए काम नहीं कर रहा था।

Answer 19

Verndor-prefixes.less में 69 लाइन खोजें और इसे निम्नलिखित लिखें:

.panel {
    margin-bottom: 20px;
    height: 100px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

Answer 20

बस रिलीज़ किए गए संस्करण 4 के लिए गेटबूटस्ट्रैप पृष्ठों में से एक से इसे कॉपी किया गया था जो ऊपर की तुलना में बहुत बेहतर काम करता था

<div class="d-none d-xl-block col-xl-2 bd-toc float-md-right">
    <ul class="section-nav">
         <li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
         <li class="toc-entry toc-h2"><a href="#classes">Classes</a></li>
         <li class="toc-entry toc-h2"><a href="#mixins">Mixins</a></li>
         <li class="toc-entry toc-h2"><a href="#responsive">Responsive</a></li>
    </ul>
</div> 

Answer 21

मैं ओवरफ्लो करने के लिए नया हूं और अंतिम छोर के विकास के लिए नया हूं। इसी से मेरा काम बना है। इसलिए मैं नहीं चाहता था कि सूची आइटम प्रदर्शित हों।

.hidden {
  display:none;
  } 
  
 #loginButton{
 
 margin-right:2px;
 
 }

<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">NavBar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active hidden">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="loginButton"><a href="#">Log In</a></button>
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><a href="#">Register</a></button>
    </form>
  </div>
</nav>