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

Question

में बूटस्ट्रैप , सबसे मंच के अनुकूल तरीके से केंद्र में छोड़ दिया, मेनू आइटम पर लोगो एक है कि एक नेविगेशन पट्टी, और सही पर लोगो बी बनाने के लिए क्या है?

यहाँ मैंने जो अब तक कोशिश की है, और वह संरेखित किया जा रहा है ताकि लोगो A बाईं ओर, मेनू आइटम बाईं ओर लोगो और दाईं ओर Logo B हो।

<div class="navbar navbar-fixed-top navbar-custom ">
  <div class="container" >
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">Menu Item 1</a></li>
        <li><a href="#contact">Menu Item 2</a></li>
        <li><a href="#about">Menu Item 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
      </ul>
    </div>
  </div>
</div>

Answer 1

2019 अपडेट

बूटस्ट्रैप ४

अब जबकि बूटस्ट्रैप 4 में फ्लेक्सबॉक्स है, नवबार संरेखण बहुत आसान है। यहां बूटस्ट्रैप 4 नवबार में बाएं , दाएं और केंद्र के लिए अद्यतन उदाहरण हैं , और यहां प्रदर्शित कई अन्य संरेखण परिदृश्य हैं ।

Flexbox , ऑटो मार्जिन , और आदेश देने उपयोगिता वर्ग के रूप में की जरूरत नेवबार सामग्री संरेखित करने के लिए इस्तेमाल किया जा सकता। बड़े स्क्रीन और मोबाइल / ध्वस्त विचारों दोनों पर नवबर वस्तुओं (ब्रांड, लिंक, टॉगलर) के क्रम और संरेखण सहित कई बातों पर विचार करना है। नवबर के लिए ग्रिड कक्षाएं (पंक्ति, कॉल) का उपयोग न करें ।

यहाँ विभिन्न उदाहरण हैं ...

बाएं, केंद्र (ब्रांड) और दाएं लिंक:

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Left</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="//codeply.com">Codeply</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>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#">Navbar 2</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

http://www.codeply.com/go/qhaBrcWp3v

केंद्र लिंक और ओवरले लोगो छवि के साथ एक और BS4 नवबार विकल्प :

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
        <ul class="navbar-nav ml-auto text-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="mx-auto my-2 order-0 order-md-1 position-relative">
        <a class="mx-auto" href="#">
            <img src="//placehold.it/120/ccff00" class="rounded-circle">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
        <ul class="navbar-nav mr-auto text-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

या , ये अन्य बूटस्ट्रैप 4 संरेखण परिदृश्य:

ब्रांड बाएं, मृत केंद्र लिंक, (खाली दाएं)

---

ब्रांड और लिंक केंद्र, बाएँ और दाएँ आइकन

---

अधिक बूटस्ट्रैप 4 उदाहरण :

मोबाइल पर टॉगलर छोड़ दिया, ब्रांड राइट
सेंटर ब्रांड और
डेस्कटॉप पर मोबाइल राइट एलाइन लिंक पर लिंक, मोबाइल लेफ्ट लिंक पर सेंटर
लिंक और टॉगलर, सेंटर ब्रांड, राइट राइट

---

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

---

बूटस्ट्रैप ३

विकल्प 1 - ब्रांड केंद्र, बाएं / दाएं नौसेना लिंक के साथ:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <a class="navbar-brand" href="#">Brand</a>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Left</a></li>
        <li><a href="#about">Left</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#about">Right</a></li>
      <li><a href="#contact">Right</a></li>
    </ul>
  </div>
</nav>

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin:0 auto;
}
.navbar-toggle {
    z-index:3;
}

http://bootply.com/98314 (3.x)

---

विकल्प 2 - बाएं, केंद्र और दाएं नौसेना लिंक:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Left</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-center">
        <li><a href="#">Center</a></li>
        <li><a href="#">Center</a></li>
      <li><a href="#">Center</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Right</a></li>
    </ul>
  </div>
</nav>

@media (min-width: 768px) {
  .navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }
}

http://www.bootply.com/SGYC6BWeBK

विकल्प 3 - केंद्र ब्रांड और लिंक दोनों

.navbar .navbar-header,
.navbar-collapse {
    float:none;
    display:inline-block;
    vertical-align: top;
}

@media (max-width: 768px) {
    .navbar-collapse  {
        display: block;
    }
}

http://www.codeply.com/go/1lrdvNH9GI

और ज्यादा उदाहरण:

लेफ्ट ब्रांड, सेंटर लिंक
लेफ्ट टॉगलर, सेंटर ब्रांड

3.x के लिए भी नौसेना-औचित्य देखें: बूटस्ट्रैप केंद्र नावबार

---

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

Comments

आप बाईं ओर टॉगल करने के लिए बाएं आइटम को कैसे गिरा सकते हैं?

— gepex

मैं 2 jsfiddle उदाहरण बनाया है, क्योंकि अभी bootply काम नहीं कर रहा है। सोल 1 और सोल 2 । btw, soluzion 2 बेहतर काम करता है (imho)

— GiuServ

बूटस्ट्रैप 4 के लिए, फ़ायरफ़ॉक्स का उपयोग करके, उदाहरण # 1 काम नहीं करता है। .absकक्षा को जोड़ने से navbar-brandतत्व बाईं और दाईं ओर के बटनों को कवर करने का कारण बनता है , जिससे वे

— अवर्णनीय

यह उत्तर के रूप में कैसे चिह्नित नहीं है? बीएस 3 और 4 के लिए 3 विकल्प देता है, धन्यवाद सर।

— Murkantilism

आपका कोई भी कोड लिंक नहीं खुल रहा है और यह उस वेबसाइट में उपयोग किए गए भयानक डिजाइन के कारण है। उन्होंने सभी तरह के विज्ञापन, ग्राफकॉल को मिलाया ... एक साथ और अगर कोई लोड या ब्लॉक करने में विफल रहता है, तो पूरी स्क्रीन खाली हो जाएगी। हाँ, यह वह तरह से कोणीय कार्य है (या काम नहीं करता है)।

— AAA

Answer 2

बूटस्ट्रैप ४

हमारे पास navars आइटम को संरेखित करने के कई तरीके हैं।

लेफ्ट एलाइन के लिए

वर्ग = "नवबार-नव -श्री ऑटो "

राइट अलायन्स के लिए

वर्ग = "नवबार-नव -एमएल-ऑटो "

केंद्र संरेखित करें

वर्ग = "नवबर-नव mx- ऑटो "

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a routerLink="/" class="navbar-brand" href="#">Bootsrap 4</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact us</a>
</li>
</ul>
</nav>

Comments

b-nav-item टैग में क्लास = "navbar-brand mx-auto"

— जोड़ना

Answer 3

मुझे कुछ इसी तरह की आवश्यकता थी (बाएं, केंद्र और दाएं संरेखित आइटम), लेकिन सक्रिय के रूप में केंद्रित वस्तुओं को चिह्नित करने की क्षमता के साथ। मेरे लिए क्या काम था:

http://www.bootply.com/CSI2KcCoEM

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="navbar-left"><a href="#">Left 1</a></li>
      <li class="navbar-left"><a href="#">Left 2</a></li>
      <li class="active"><a href="#">Center 1</a></li>
      <li><a href="#">Center 2</a></li>
      <li><a href="#">Center 3</a></li>
      <li class="navbar-right"><a href="#">Right 1</a></li>
      <li class="navbar-right"><a href="#">Right 2</a></li>
    </ul>
  </div>
</nav>

सीएसएस:

@media (min-width: 768px) {
  .navbar-nav {
    width: 100%;
    text-align: center;
  }
  .navbar-nav > li {
    float: none;
    display: inline-block;
  }
  .navbar-nav > li.navbar-right {
    float: right !important;
  }
}

Comments

यह बहुत करीब है, लेकिन जब आप इसे तोड़ते हैं तो यह टूट जाता है। यदि आप इसे मोबाइल डिवाइस पर देखते हैं तो "ब्रांड" मेनू बार के नीचे दिखाई देता है। क्या ब्रांड वास्तविक नव का हिस्सा नहीं है?

— spasticninja

यह ओपी को अधिक बारीकी से जवाब देता है।

— रोजर ड्यूक

अब तक यह मेरे लिए काम कर चुका है। मेरे पास एक ब्रांड और न ही एक सही संरेखित तत्व नहीं है, सिर्फ 3 केंद्रित विकल्प। धन्यवाद

— एलेसेंड्रो

मुझे लगता है कि यह समाधान सबसे ज्यादा वोट किए गए जवाब से बेहतर काम करता है कि स्क्रीन के आकार को कम करने पर कोई भी तत्व नेवबार से बाहर नहीं

— लटकता है

Answer 4

बूटस्ट्रैप 4 (अल्फा 6 के रूप में)

नवबंर फ्लेक्सबॉक्स के साथ निर्मित होते हैं! फ़्लोट्स के बजाय, आपको फ्लेक्सबॉक्स और मार्जिन उपयोगिताओं की आवश्यकता होगी।

Div justify-content-endपर संरेखित करें उपयोग के लिए collapse:

<div class="collapse navbar-collapse justify-content-end">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
  </ul>
</div>

यहां पूरा उदाहरण: https://jsbin.com/kemawa/edit?output

Comments

मेरे लिए काम नहीं करता है ... जस्टिफाई-कंटेंट-एंड, नेवी पर लागू होता है और ऐसा लगता नहीं है कि नेवबार के लिए काम करना बूटस्ट्रैप का नवीनतम संस्करण है।

— स्टीफन पेकेट

@stephanePaquet, यह अल्फा 6 (सबसे हालिया बूटस्ट्रैप रिलीज़) पर लागू है - आप क्या उपयोग कर रहे हैं?

— जेरेमी लिंच

Answer 5

मेरे सिर को सूँघो, बस मेरे जवाब को फिर से महसूस करो और महसूस करो कि ओपी दो लोगो में से एक के लिए दाईं ओर एक केंद्र मेनू के साथ दाईं ओर पूछ रहा है, दूसरे तरीके से नहीं।

यह HTML में कड़ाई से बूटस्ट्रैप के "नेवेर-राइट" और लोगो के लिए "नेवेर-लेफ्ट" का उपयोग करके और फिर अपने यूएएल के लिए "नवबार-नेवी" के बजाय "नेवी-जस्टिफ़ाइड" का उपयोग करके पूरा किया जा सकता है। कोई अतिरिक्त सीएसएस की जरूरत नहीं है (जब तक कि आप एक्सएस व्यूपोर्ट में केंद्र में नेवबार-पतन टॉगल नहीं डालना चाहते हैं, तो आपको थोड़ा ओवरराइड करने की आवश्यकता है, लेकिन वह आपको छोड़ देगा)।

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="navbar-brand navbar-left"><a href="#"><img src="http://placehold.it/150x30"></a></div>

  </div>
  <div class="navbar-brand navbar-right"><a href="#"><img src="http://placehold.it/150x30"></a></div>

  <div class="navbar-collapse collapse">
    <ul class="nav nav-justified">
        <li><a href="#">home</a></li>
        <li><a href="#about">about</a></li>
    </ul>
  </div>
</nav>

बूटप्ले: http://www.bootply.com/W6uB8YfKxm

---

जो लोग यहां "ब्रांड" को केंद्र में लाने की कोशिश कर रहे हैं उनके लिए मेरा पुराना जवाब है:

मुझे पता है कि यह धागा थोड़ा पुराना है, लेकिन इस पर काम करते समय सिर्फ अपने निष्कर्षों को पोस्ट करना है। मैंने अपने समाधान को स्केली के उत्तर के आधार पर करने का निर्णय लिया क्योंकि टामसज़बक के कोलासैप पर टूटने के बाद। पहले मैंने अपना "नेवबार-सेंटर" बनाया और अपने सीएसएस में सामान्य नेवबार के लिए फ्लोट को बंद कर दिया:

.navbar-center
{
   position: absolute;
   width: 100%;
   left: 0;
   text-align: center;
   margin: auto;
}

.navbar-brand{
   float:none;
}

हालाँकि स्केली के उत्तर के साथ मुद्दा यह है कि क्या आपके पास वास्तव में लंबे ब्रांड का नाम है (या आप अपने ब्रांड के लिए एक छवि का उपयोग करना चाहते हैं) तो एक बार जब आप sm के व्यूपोर्ट में पहुँच जाते हैं तो निरपेक्ष स्थिति के कारण अतिव्यापी हो सकते हैं और जैसा कि टिप्पणीकारों ने किया है कहा, एक बार जब आप xs व्यूपोर्ट में टॉगल स्विच टूट जाता है (जब तक आप Z स्थिति का उपयोग नहीं करते हैं, लेकिन मैं वास्तव में इसके बारे में चिंता नहीं करना चाहता था)।

इसलिए मैंने जो किया वह ब्रांड ब्लॉक के कई संस्करण बनाने के लिए बूटस्ट्रैप उत्तरदायी उपयोगिताओं का उपयोग किया गया था :

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <div class="navbar-brand visible-xs"><a href="#">Brand That is Really Long</a></div>
</div>
<div class="navbar-brand visible-sm text-center"><a href="#">Brand That is Really Long</a></div>
<div class="navbar-brand navbar-center hidden-xs hidden-sm"><a href="#">Brand That is Really Long</a></div>

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-left">
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
  </ul>
</div>

तो अब lg और md viewports ब्रांड को बाईं और दाईं ओर लिंक के साथ केंद्रित किया गया है, एक बार जब आप sm viewport पर पहुंचते हैं तो आपके लिंक अगली पंक्ति में गिर जाते हैं ताकि आप अपने ब्रांड के साथ ओवरलैप न करें, और फिर अंत में xs पर। कोस्पैस किक को व्यूपोर्ट में रखें और आप टॉगल का उपयोग करने में सक्षम हैं। आप इसे एक कदम आगे ले जा सकते हैं और नावबार-ब्रांड के साथ उपयोग किए जाने पर नावबार-दाएं और नावबार-बाएं के लिए मीडिया प्रश्नों को संशोधित कर सकते हैं ताकि sm viewport में लिंक सभी केंद्रित हों लेकिन इसे बाहर करने का समय नहीं था।

आप यहां मेरे पुराने बूटप्ले की जांच कर सकते हैं: www.bootply.com/n3PXXropP3

मुझे लगता है कि 3 ब्रांड होने के नाते "z" जितना ही झंझट हो सकता है, लेकिन मुझे लगता है कि उत्तरदायी डिजाइन की दुनिया में यह समाधान मेरी शैली को बेहतर ढंग से फिट करता है।

Answer 6

मैंने पाया कि आपके बाएं, केंद्र और दाएं आइटम की सामग्री के आधार पर निम्नलिखित एक बेहतर समाधान था। बिना मार्जिन के 100% की चौड़ाई के कारण ओवरलैपिंग होती है और एंकर टैग को सही तरीके से काम करने से रोक रहा है - जो कि जेड-इंडेक्स के गड़बड़ उपयोग के बिना है।

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    margin: auto;
    margin-left: 48%;
}

Answer 7

यह एक दिनांकित प्रश्न है, लेकिन मुझे बूटस्ट्रैप जीथब पृष्ठ से सही साझा करने के लिए एक वैकल्पिक समाधान मिला। दस्तावेज़ीकरण को अद्यतन नहीं किया गया है और एसओ पर अन्य प्रश्न हैं जो थोड़े अलग प्रश्नों पर एक ही समाधान पूछते हैं। यह समाधान आपके मामले के लिए विशिष्ट नहीं है, लेकिन जैसा कि आप देख सकते हैं कि समाधान इसके <div class="container">बाद का अधिकार है, <nav class="navbar navbar-default navbar-fixed-top">लेकिन इसे <div class="container-fluid"आवश्यकतानुसार बदला भी जा सकता है ।

<!DOCTYPE html>
<html>

<head>
  <title>Navbar right padding broken </title>
  <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#/" class="navbar-brand">Hello</a>
      </div>
      <div class="collapse navbar-collapse navbar-ex1-collapse">

        <ul class="nav navbar-nav navbar-right">
          <li>
            <div class="btn-group navbar-btn" role="group" aria-label="...">
              <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalLogin">Se connecter</button>
              <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalSignin">Créer un compte</button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

इस पृष्ठ पर एक हल मिला था: https://github.com/twbs/bootstrap/issues/18362

और V3 में तय नहीं किया जाएगा।

Answer 8

<div class="d-flex justify-content-start">hello</div>    
<div class="d-flex justify-content-end">hello</div>
<div class="d-flex justify-content-center">hello</div>
<div class="d-flex justify-content-between">hello</div>
<div class="d-flex justify-content-around">hello</div>

उन क्षेत्रों को रखें जिन्हें आप विभाजन के अनुसार दाएं या बाएं करना चाहते हैं।

Answer 9

आप जिस हिस्से को दाईं ओर ले जाना चाहते हैं, उसे ऑटो -> एमएल-ऑटो पर छोड़ दें।

 <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="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
  <div class="navbar-nav ml-auto"> !<--MARGIN LEFT AUTO HERE !-->
    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
    <a class="nav-item nav-link" href="#">Features</a>
    <a class="nav-item nav-link" href="#">Pricing</a>
    <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </div>
</div>

Answer 10

सबसे सरल उपाय:

बस navbarकॉलम में विभाजित करें : उदाहरण के लिए, यदि आपके पास 24 कॉलम हैं, तो 12 खाली होने जा रहे हैं और 12 नावबार के विपरीत होने वाले हैं:

<nav class="navbar navbar-default">
    <div class="row">
       <div class="col-sm-4"></div>
       <div class="col-sm-4"></div>
       <div class="col-sm-4"></div>

       <div class="col-sm-12">
           <ul class="nav navbar-nav" align="center">
              <li><a href="#">Home</a></li>
              <li><a href="#">First Link</a></li>
              <li><a href="#">Second Link</a></li>
              <li><a href="#">Third Link</a></li>
              <li><a href="#">Fourth Link</a></li>
           </ul>
       </div>
    </div>
</nav>

Comments

ग्रिड लाइन और कर्नल का उपयोग नब्बर के अंदर नहीं किया जाना चाहिए। समर्थित सामग्री का उपयोग करें ।

— ज़िम्म

@Zim क्यों नहीं, इसके बारे में इतना बुरा क्या है?

— पारसकर