बूटस्ट्रैप 4 - टॉगल बटन

Question

के साथ नेविबार के दाईं ओर दिए गए लिंक को स्थानांतरित करना मैं नेविबार के बाईं ओर से दाईं ओर लिंक को स्थानांतरित करने का प्रयास कर रहा था और यह मुझे नहीं जाने देगा। मैंने इसे दाईं ओर तैरने की कोशिश की है और कुछ भी नहीं हुआ था, स्थिति के साथ: रिश्तेदार; दाएं: 200 पीएक्स; और पैडिंग-दाएं: -200 पीएक्स; अगर किसी के पास कोई अन्य सुझाव है तो इसकी सराहना की जाएगी धन्यवाद।

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 

    <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="index.html"> 

     <img id="logo" src="images/logo.png" width="200" class="d-inline-block align-top" alt=""> 

    </a> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 

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

      <li class="nav-item"> 
       <a class="nav-link active text-white" href="index.html">Home <span class="sr-only">(current)</span></a> 
      </li> 

      <li class="nav-item"> 
       <a class="nav-link text-white" href="services.html">Services</a> 
      </li> 

      <li class="nav-item"> 
       <a class="nav-link text-white" href="portfolio.html">Portfolio</a> 
      </li> 

      <li class="nav-item"> 
       <a class="nav-link text-white" href="about.html">About</a> 
      </li> 

     </ul> 

    </div> 
</nav> 

Answer 1

आप .mr-auto का उपयोग कर रहे हैं ताकि आप margin-right: auto !important है और नव-आइटम गठबंधन छोड़ दिया।
आप .ml-auto के लिए कक्षा बदलते हैं तो आपको margin-left: auto !important है और अपने नव-आइटम सही संरेखित हैं

Answer 2

बूटस्ट्रैप में कुछ सीएसएस संशोधित करें:

प्रयुक्त justify-content: end; अंत के लिए

.mr-auto { 
    margin-right: 0 !important; 
} 
.navbar-toggleable-md .navbar-collapse {   
    -webkit-justify-content: flex-end; 
    justify-content: flex-end; 
} 

यहाँ है सामग्री शुरू करने के लिए फिल्ड कोड: https://jsfiddle.net/0ewenvcb/2/