बूटस्ट्रैप में बाएं से दाएं से मेरी स्लाइड टॉगल कैसे करें?

Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<nav class="navbar navbar-default"> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="container-fluid"> 
 
     <!-- Brand and toggle get grouped for better mobile display --> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
     </div> 
 
     <!-- Collect the nav links, forms, and other content for toggling --> 
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <!-- Search Box --> 
 
      <form class="navbar-form navbar-left" role="search" id="search_mobile"> 
 
      <div class="form-group"> 
 
       <input type="text" class="form-control" placeholder="Enter your manual keyword"> 
 
      </div> 
 
      <button type="submit" class="btn btn-default">Search</button> 
 
      </form> 
 
      <ul class="nav navbar-nav"> 
 
      <li><a href="#">MANUALS</a></li> 
 
      <li><a href="#">NEWS</a></li> 
 
      <li><a href="#">SPARE PART</a></li> 
 
      <li><a href="#">WHERE TO BUY</a></li> 
 
      <li><a href="#">SUPPORT</a></li> 
 
      <li><a href="#">EDIT BOOK</a></li> 
 
      <li><a href="#">ADMIN</a></li> 
 
      <!-- <li><a href="#" id="logout">LOG OUT</a></li> --> 
 
      </ul> 
 
     </div><!-- /.navbar-collapse --> 
 
     </div><!-- /.container-fluid --> 
 
    </div> 
 
    </div> 
 
</nav>

मैं मोबाइल दृश्य पर मेरे उत्तरदायी नेवबार के लिए बूटस्ट्रैप उपयोग कर रहा हूँ। जब मैं बटन क्लिक करता हूं और navbar मेनू ऊपर से नीचे प्रदर्शित होता है।

इसे बाएं से दाएं बनाने के लिए मुझे क्या करना चाहिए? (अपने विंडोज़ को मोबाइल आकार में आकार बदलने के लिए याद रखें)।

Answer 1

आपको इसे संग्रहीत करने के लिए निम्नलिखित दो गुणों को ओवरराइड करने की आवश्यकता है। यहां आपको pull-left बूटस्ट्रैप क्लास का भी उपयोग करना चाहिए, यह वर्ग तत्व केवल बाईं तरफ जाता है लेकिन मार्जिन सेट नहीं करता है। मैंने सोचा कि आपको आवश्यकता पर आधार ओवरराइड करना चाहिए।

.nav-left{ 
 
    float: left !important; 
 
    margin: 8px 15px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<nav class="navbar navbar-default"> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="container-fluid"> 
 
     <!-- Brand and toggle get grouped for better mobile display --> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed nav-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
     </div> 
 
     <!-- Collect the nav links, forms, and other content for toggling --> 
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <!-- Search Box --> 
 
      <form class="navbar-form navbar-left" role="search" id="search_mobile"> 
 
      <div class="form-group"> 
 
       <input type="text" class="form-control" placeholder="Enter your manual keyword"> 
 
      </div> 
 
      <button type="submit" class="btn btn-default">Search</button> 
 
      </form> 
 
      <ul class="nav navbar-nav"> 
 
      <li><a href="#">MANUALS</a></li> 
 
      <li><a href="#">NEWS</a></li> 
 
      <li><a href="#">SPARE PART</a></li> 
 
      <li><a href="#">WHERE TO BUY</a></li> 
 
      <li><a href="#">SUPPORT</a></li> 
 
      <li><a href="#">EDIT BOOK</a></li> 
 
      <li><a href="#">ADMIN</a></li> 
 
      <!-- <li><a href="#" id="logout">LOG OUT</a></li> --> 
 
      </ul> 
 
     </div><!-- /.navbar-collapse --> 
 
     </div><!-- /.container-fluid --> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 2

आप इस लोकप्रिय बूटस्ट्रैप कांटा उपलब्ध बाहर की जाँच कर सकते हैं: Jasny Bootstrap

यह बाईं प्रभाव से में एक ही स्लाइड है।

<link href="http://www.jasny.net/bootstrap/dist/css/jasny-bootstrap.min.css" rel="stylesheet"/> 
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<script src="http://www.jasny.net/bootstrap/dist/js/jasny-bootstrap.min.js"></script> 
 

 
<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation"> 
 
    <a class="navmenu-brand" href="#">Brand</a> 
 
    <ul class="nav navmenu-nav"> 
 
    <li class="active"><a href="#">Home</a></li> 
 
    <li><a href="#">Link</a></li> 
 
    <li><a href="#">Link</a></li> 
 
    </ul> 
 
</nav> 
 
<div class="navbar navbar-default navbar-fixed-top"> 
 
    <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body"> 
 
    <span class="icon-bar"></span> 
 
    <span class="icon-bar"></span> 
 
    <span class="icon-bar"></span> 
 
    </button> 
 
</div>

Answer 3

Jasny बूटस्ट्रैप स्लाइड में प्लग में, डिफ़ॉल्ट वर्ग है "navmenu-अचल छोड़ दिया" के साथ

। आप "navmenu-अचल सही" दाईं ओर से में मेनू स्लाइड बनाने के लिए करने के लिए वर्ग बदल सकते हैं:

<div class="navmenu navmenu-default navmenu-fixed-right offcanvas" role="navigation"> 
<ul class="nav navmenu-nav"> 
<li><a href="about.php">About</a></li> 
<li><a href="capabilities.php">Capabilities</a></li> 
</ul> 
</div> 

आप भी टॉगल बटन सही पक्ष पर प्रदर्शित करना चाहते हैं, तो आपको कुछ समायोजित करने की आवश्यकता सीएसएस:

.navbar-default .navbar-toggle-box { 
float: right; 
margin-left: 15px; 
margin-right: 0; 
margin-top: 0; 
position: absolute; 
right: 0; 
}