Come far scorrere la mia diapositiva da sinistra a destra nel bootstrap?

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>

Sto usando bootstrap per la mia barra di navigazione sensibile sulla vista mobile. Quando faccio clic sul pulsante e il menu della barra di navigazione è visualizzato dall'alto verso il basso.

Cosa devo fare per farlo da sinistra a destra? (Ricordarsi di ridimensionare le finestre in dimensioni mobili).

Answer 1

È necessario eseguire l'override delle seguenti due proprietà per archiviarlo. Qui si dovrebbe usare anche pull-left classe bootstrap, questo elemento di classe si sposta solo sul lato sinistro ma non imposta il margine. Ho pensato che dovresti scavalcare la base del requisito.

.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

È possibile controllare questa forcella Bootstrap popolare disponibile: Jasny Bootstrap

Ha lo stesso vetrino in effetti da sinistra.

<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

Con il Jasny Bootstrap slide-in plug-in, la classe predefinita è "navmenu-fisso-sinistra". È possibile modificare la classe per "navmenu-fisso-destra" per rendere la diapositiva menu dal lato destro:

<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> 

Se si desidera anche il pulsante di commutazione di apparire sul lato destro, è necessario regolare un po ' CSS:

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