Làm cách nào để chuyển trang trình bày của tôi từ trái sang phải trong 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>

Tôi đang sử dụng bootstrap cho navbar đáp ứng của tôi vào xem điện thoại di động. Khi tôi nhấp vào nút và menu thanh điều hướng hiển thị từ trên xuống dưới.

Tôi nên làm gì để có thể làm điều đó từ trái sang phải? (Nhớ thay đổi kích thước cửa sổ của bạn thành kích thước di động).

Answer 1

Bạn cần ghi đè hai thuộc tính sau để lưu trữ. Ở đây bạn cũng nên sử dụng pull-left lớp khởi động, phần tử lớp này chỉ chuyển sang bên trái nhưng không đặt lề. Tôi nghĩ bạn nên ghi đè lên căn cứ vào yêu cầu.

.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

Bạn có thể kiểm tra nĩa Bootstrap phổ biến này có sẵn: Jasny Bootstrap

Nó có cùng một slide từ hiệu ứng trái.

<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

Với Jasny Bootstrap slide-in plug-in, lớp mặc định là "navmenu cố định bên trái". Bạn có thể thay đổi lớp thành "navmenu-fixed-right" để làm cho trang trình bày trượt từ phía bên phải:

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

Nếu bạn cũng muốn nút bật tắt xuất hiện ở bên phải, bạn cần điều chỉnh một số CSS:

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