2012-10-16 29 views
5

Tôi đang cố gắng để tạo ra một sidebar như những người thân trong tài liệu bootstrap Twitter: http://twitter.github.com/bootstrap/getting-started.htmlTwitter bootstrap sidebar gắn liền sụp đổ khi tôi di chuyển xuống

Tôi đã có những đóng làm việc và tất cả nhưng bất cứ khi nào bạn di chuyển quá khứ đĩa dữ liệu bù thanh bị sụp đổ vì nó không có.

HTML

<div class="span3"> 
      <ul data-spy="affix" data-offset-top="255" class="nav nav-tabs nav-stacked docs-sidebar" id="navbar"> 
      <li><a href="#grid">Grid system <i class="icon-chevron-right pull-right"></i></a></li> 
      <li><a href="#fluidGridSystem">Fluid grid system <i class="icon-chevron-right pull-right"></i></a></li> 
      <li><a href="#layouts">Layouts <i class="icon-chevron-right pull-right"></i></a></li> 
      <li><a href="#responsive">Responsive design <i class="icon-chevron-right pull-right"></i></a></li> 
      </ul> 
      <p></p> 
     </div> 

LESS

// For Affix plugin 
.affix { 
    position: fixed; 
    top: (@navbarHeight * 1.8) + @navbarPadding + 25px; 
} 

.docs-sidebar { 
    width: (@gridColumnWidth * 4); 
} 

Điều này làm cho các bên có chiều rộng span4 cố định nhưng không làm cho nó đáp ứng. Làm thế nào để đảm bảo nó đáp ứng?

+0

Tôi gặp vấn đề tương tự. Tôi đã sử dụng các truy vấn phương tiện để thay thế thanh bên gắn với thanh điều hướng đáp ứng. Nhưng nếu bạn kiểm tra trang khởi động, bạn có thể thấy chúng đã làm như thế nào. – noel

Trả lời

0

Tôi cũng đang cố gắng tìm ra cách tốt nhất để thực hiện việc này. Đây là những gì tôi đã làm. Có lẽ không phải là giải pháp tốt nhất nhưng nó hoạt động.

Tôi có bố cục hai cột nơi tôi muốn bên trái .affix. Tôi kéo cột để cố định ra khỏi hàng và đặt nó trong hàng riêng của nó trên bản gốc. Tôi đã di chuyển cột còn lại vào vị trí bằng cách thêm .offset3. Tôi đặt .affix trên cột div thay vì ul. Sau đó, tôi bọc cột cố định trong một div với CSS của vị trí: tuyệt đối; (đó là bên trong div .row và bên ngoài .col3 div) Điều đó đặt hai div .row để chồng lên nhau nơi một cố định và cuộn khác.

Các vấn đề liên quan