बूटस्ट्रैप 4 कंटेनर

Question

में नौसेना-पतन अक्षम करें हाय मैं बूटस्ट्रैप 4 में नेवर पतन को अक्षम करना चाहता हूं। और यह अच्छा होगा अगर navbar छेद की चौड़ाई को हटा देता है लेकिन navbar के अंदर कंटेनर क्लास केवल डिफ़ॉल्ट चौड़ाई को सामग्री रखने की अनुमति देता है ।

मैंने इस Disable responsive navbar in bootstrap 4 को आजमाया है, लेकिन इसमें कंटेनर के साथ काम नहीं कर रहा है।

लेकिन

<nav class="navbar navbar-light bg-faded justify-content-between flex-nowrap flex-row"> 
    <div class="container "> 
    <a href="/" class="navbar-brand">PIM</a> 
    <ul class="nav navbar-nav flex-row"> 
    <li class="nav-item"><a class="nav-link pr-3" href="">Login</a></li> 
    <li class="nav-item"><a class="nav-link" href="">Sign up</a></li> 
    </ul> 
    </div> 
</nav> 

कि

की तरह दिखता है, लेकिन कोई रेखा को तोड़ने नहीं होनी चाहिए काम नहीं कर रहा thats।

यह भी अच्छा होगा यह लॉग इन .. सौंपा रह जायेंगे और साइन अप सही नेवबार में सौंपा

Answer 1

बस navbar-toggleable-xl का उपयोग किया जाएगा

संपादित - 4 बीटा बूटस्ट्रैप अब navbar-expand है

<nav class="navbar navbar-toggleable-xl navbar-inverse bg-primary"> 
    <div class="container"> 
     <a class="navbar-brand" href="#">Navbar</a> 
     <div class="navbar-collapse collapse"> 
      <ul class="navbar-nav"> 
       <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> 
</nav> 

http://www.codeply.com/go/8FF7HX22L3

वैकल्पिक रूप से, यह flexbox उपयोगिता वर्गों का उपयोग किया जा सकता है ...

<nav class="navbar navbar-light bg-faded justify-content-between flex-nowrap flex-row"> 
    <div class="container"> 
     <a href="/" class="navbar-brand float-left">PIM</a> 
     <ul class="nav navbar-nav flex-row float-right"> 
      <li class="nav-item"><a class="nav-link pr-3" href="">Login</a></li> 
      <li class="nav-item"><a class="nav-link" href="">Sign up</a></li> 
     </ul> 
    </div> 
</nav> 

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

Answer 2

बूटस्ट्रैप 4 बीटा संस्करण के लिए

बस जोड़ने navbar-expand<nav> को

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-expand 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"> 
 
     <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"> 
 
     <a class="nav-link disabled" href="#">Disabled</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>