Đã sửa lỗi điều hướng thanh bên trong bootstrap 2.0 của twitter chất lỏng

Có thể làm cho điều hướng thanh bên luôn cố định khi cuộn trong bố cục linh hoạt không?

Lưu ý: Có một plugin bootstrap jQuery thực hiện điều này và nhiều hơn nữa đã được giới thiệu một vài phiên bản sau khi câu trả lời này được viết (gần hai năm trước) được gọi là Affix . Câu trả lời này chỉ áp dụng nếu bạn đang sử dụng Bootstrap 2.0.4 trở xuống.

Có, chỉ cần tạo một lớp cố định mới cho thanh bên của bạn và thêm một lớp bù vào div nội dung của bạn để bù cho lề trái, như sau:

CSS

.sidebar-nav-fixed {
    padding: 9px 0;
    position:fixed;
    left:20px;
    top:60px;
    width:250px;
}

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}

Demo: http://jsfiddle.net/U8HGz/1/show/ Chỉnh sửa tại đây: http://jsfiddle.net/U8HGz/1/

Cập nhật

Đã sửa bản trình diễn của tôi để hỗ trợ trang tính khởi động đáp ứng, giờ đây nó chạy với tính năng đáp ứng của trang tính khởi động.

Lưu ý: Bản trình diễn này chạy với thanh điều hướng cố định trên cùng, vì vậy cả hai yếu tố đều trở thành position:statickhi thay đổi kích thước màn hình, tôi đã đặt một bản trình diễn khác bên dưới để duy trì thanh bên cố định cho đến khi màn hình giảm xuống để xem trên thiết bị di động.

CSS

.sidebar-nav-fixed {
     position:fixed;
     top:60px;
     width:21.97%;
 }

 @media (max-width: 767px) {
     .sidebar-nav-fixed {
         width:auto;
     }
 }

 @media (max-width: 979px) {
     .sidebar-nav-fixed {
         position:static;
        width: auto;
     }
 }

HTML

<div class="container-fluid">
<div class="row-fluid">
 <div class="span3">
   <div class="well sidebar-nav sidebar-nav-fixed">
    ...
   </div><!--/.well -->
 </div><!--/span-->
 <div class="span9">
    ...
 </div><!--/span-->
</div><!--/row-->

</div><!--/.fluid-container-->

Demo , chỉnh sửa tại đây .

^{lưu ý nhỏ: có sự khác biệt khoảng 10px / 1% trên chiều rộng của thanh bên cố định, do thực tế là vì nó không kế thừa chiều rộng từ div vùng chứa span3 vì nó đã được cố định, tôi đã phải đưa ra một chiều rộng. Nó đủ gần.}

Và đây là một phương pháp khác nếu bạn muốn giữ thanh bên cố định cho đến khi lưới giảm xuống cho chế độ xem màn hình nhỏ / di động.

CSS

.sidebar-nav-fixed {
    position:fixed;
    top:60px;
    width:21.97%;
}

@media (max-width: 767px) {
    .sidebar-nav-fixed {
        position:static;
        width:auto;
    }
}

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        top:70px;
    }
}

Demo , chỉnh sửa tại đây .

Boostrap mới nhất (2.1.0) có tính năng JS "gắn" mới dành riêng cho loại ứng dụng này, FYI.

điều này sẽ làm hỏng Thiết kế web đáp ứng. Tốt hơn nên bọc thanh bên cố định trong một truy vấn phương tiện.

CSS

@media (min-width: 768px) { 
  .sb-fixed{
    position: fixed;
  } 
}

HTML

<div class="span3 sb-fixed">
   <div class="well sidebar-nav">
      <!-- Sidebar Contents -->
   </div>
</div>

Bây giờ thanh bên chỉ được cố định, nếu viewpot lớn hơn thì 768px.

Điều này không thể thực hiện được nếu không có javascript. Tôi thấy affix.js quá phức tạp, vì vậy tôi muốn sử dụng:

dính

Tôi bắt đầu với câu trả lời của Andres và cuối cùng nhận được một thanh bên dính như thế này:

HTML:

<div class="span3 sidebar-width">
  <div class="well sidebar-nav-fixed">
    Sidebar
  </div>
</div>

<div class="span9 span-fixed-sidebar">
  Content
</div> <!-- /span -->

CSS:

.sidebar-nav-fixed {
  position:fixed;
}

JS / jQuery:

sidebarwidth = $(".sidebar-width").css('width');
$('.sidebar-nav-fixed').css('width', sidebarwidth);
contentmargin = parseInt(sidebarwidth) + 60;
$('.span-fixed-sidebar').css('marginLeft', contentmargin);

Tôi giả sử tôi cũng cần JS để cập nhật biến 'sidebarwidth' khi chế độ xem được thay đổi kích thước.

Rất dễ dàng để có được điều hướng sửa chữa hoặc mọi thứ bạn muốn. Tất cả những gì bạn cần là viết thẻ sửa lỗi của mình như thế này và đặt nó vào phần nội dung của bạn

   <div style="position: fixed">
       test - try  scroll again. 
   </div>

Với phiên bản Bootstrap hiện tại (3.3.2), có một cách hay để đạt được một thanh bên cố định để điều hướng.

Giải pháp này cũng hoạt động tốt với lớp chất lỏng vùng chứa được giới thiệu lại, có nghĩa là có thể dễ dàng có bố cục toàn màn hình đáp ứng.

Thông thường, bạn sẽ cần sử dụng chiều rộng và lề cố định hoặc điều hướng sẽ chồng lên nội dung, nhưng với sự trợ giúp của cột chỗ dành sẵn trống, nội dung luôn được đặt ở đúng vị trí.

Thiết lập bên dưới bao bọc nội dung khi bạn thay đổi kích thước cửa sổ thành nhỏ hơn 768px và giải phóng điều hướng cố định.

Xem http://www.bootply.com/ePvnTy1VII để biết ví dụ hoạt động.

CSS

@media (min-width: 767px) { 
    #navigation{
        position: fixed;
    }
}

HTML

<div class="container-fluid">
 <div class="row">
  <div id="navigation" class="col-lg-2 col-md-3 col-sm-3">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
    </ul>
  </div>

  <div class="col-lg-2 col-md-3 col-sm-3 hidden-xs">
    <!-- Placeholder - keep empty -->
  </div> 

  <div id="main" class="col-lg-10 col-md-9 col-sm-9 fill">
     ...
     Huge Content
     ...
  </div> 
 </div>
</div>