Tôi tương đối mới để bootstrap và cố gắng để thiết kế trang web của tôi với bootstrap đóng. Ở đây trong mã Khi tôi loại bỏ lớp học của tôi col-lg-6 từ đó nằm bên trong div mục tiêu gắn nó hoạt động hoàn toàn tốt nhưng nó không hoạt động với lớp bootstrap nhất định được áp dụng ở đó. Tôi đã cố gắng sau khi loại bỏ lớp học cụ thể tại thời điểm đó nó hoạt động chính xác tốt.Bootstrap đóng không làm việc với lớp bootstrap

<body id="top" data-spy="scroll" data-target="#header"> 
    <header id="header" style="background-position: 0% 0px;"> 
    <a class="image avatar" style="cursor: pointer;"> 
     <img src="resources/images/Nimesh.jpg" alt=""></a> 
    <h1><strong>Ata at Turpis</strong>, cep curae tempus<br> adipiscing erat ultrices laoreet<br> aliquet ac Adipiscing.</h1> 

    <ul class="nav nav-tabs nav-stacked" data-spy="affix"> 
     <li class="active"><a href="#section-1">Section One</a></li> 
     <li><a href="#section-2">Section Two</a></li> 
     <li><a href="#section-3">Section Three</a></li> 
     <li><a href="#section-4">Section Four</a></li> 
     <li><a href="#section-5">Section Five</a></li> 
    </ul> 

    </header> 

    <div id="profileImage"> 

    </div> 

    <div id="main"> 
    <div id="section-1" class="background"> 
     <div class="col-lg-6"> 
     <!--content 1a --> 
     </div> 
     <div class="col-lg-6"> 
     <!--content 1a --> 
     </div> 
    </div> 

    <div id="section-2" class="background"> 
     <div class="col-lg-6"> 
     <!--content 2a --> 
     </div> 
     <div class="col-lg-6"> 
     <!--content 2b --> 
     </div> 
    </div> 

    <div id="section-3" class="background"> 
     <div class="col-lg-6"> 
     <!--content 3a --> 
     </div> 
     <div class="col-lg-6"> 
     <!--content 3b --> 
     </div> 
    </div> 

    <div id="section-4" class="background"> 
     <div class="col-lg-6"> 
     <!--content 4a --> 
     </div> 
     <div class="col-lg-6"> 
     <!--content 4b --> 
     </div> 
    </div> 

    <div id="section-5" class="background"> 
     <div class="col-lg-6"> 
     <!--content 5a --> 
     </div> 
     <div class="col-lg-6"> 
     <!--content 5b --> 
     </div> 
    </div> 
    </div> 
</body>

2015-04-02 Nimesh

vấn đề này có thể được chia thành 2 phần:

Để sử dụng Bootstrap Grid System (ví dụ col-lg-6)
Để sử dụng Bootstrap đóng với secions bạn

1. Hệ thống lưới khởi động

Để làm cho hệ thống lưới hoạt động chính xác, 3 lớp được yêu cầu: .container, .row, .col-xs-*.

.container: Nên thêm vào trình bao bọc tài liệu của bạn.
.row: khi bạn muốn thiết lập các cột, bạn phải bao bọc các cột đó bằng một trình bao bọc .row.
.col-xs-*: Đây là nơi bạn có thể thiết lập độ rộng của nội dung của bạn.

Vì vậy, tài liệu của bạn nên được một cái gì đó như thế này:

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-3"></div> 
    <div class="col-xs-6"></div> 
    <div class="col-xs-3"></div> 
    </div> 
</div>

Các tài liệu cho hệ thống lưới điện là here.

Trong trường hợp của bạn, có vẻ như bạn không cung cấp .row cũng không .container cho các cột của mình, vì vậy bố cục thực tế sẽ bị hỏng và không mong muốn ở một mức độ nào đó. Tôi nghĩ rằng đây có lẽ là lý do tại sao nếu bạn loại bỏ những lớp col-lg-* nó hoạt động như bạn muốn.

2. Bootstrap đóng

Các official document cho đóng là khá mơ hồ thực sự. Về cơ bản, khi bạn cuộn xuống tài liệu của bạn, yếu tố <div data-spy="affix"> sẽ chuyển từ tình trạng sau:

Thêm .affix-top đến yếu tố gián điệp của bạn khi trang web được tải
Bất cứ khi nào bạn di chuyển đến giá trị của data-offset-top, nó sẽ xóa lớp .affix-top và thêm một lớp .affix vào cùng một phần tử.
Bất cứ khi nào bạn cuộn đến giá trị data-offset-bottom, nó sẽ xóa lớp .affix và thêm một lớp .affix-bottom vào cùng một phần tử.

Như tài liệu được đề cập, bạn CÓ THỂ đặt quy tắc css cho các lớp này để làm cho plugin bổ trợ hoạt động.

Có 3 quy tắc quan trọng bạn cần phải thiết lập: 1. Chiều rộng của .affix-top, .affix, .affix-bottom 2. Vị trí bạn muốn cho các phần tử đóng của bạn khi nó là cố định 3. Khôi phục vị trí .affix-bottom từ fixed để absolute

Vì vậy, css của bạn sẽ là một cái gì đó như thế này:

.affix { 
    top: 0; 
    width: 100%; 
} 

.affix-top { 
    width: 100%; 
} 

.affix-bottom { 
    position: absolute; 
    width: 100%; 
}

đây' s một ví dụ Codepen thô để sử dụng dấu. Tôi đã sao chép mã của bạn và nó hoạt động cho dù bạn thêm col-lg-6 vào phần của bạn hay không. Bạn có thể thay đổi kích thước cửa sổ để xem bố cục 2 cột của bạn. Một điều cần đề cập là tôi không hoàn toàn chắc chắn lý do tại sao bạn đặt phần tử affix của bạn trong tiêu đề của bạn vì nó được sử dụng để hiển thị danh sách tiêu đề phần trên thanh bên trong hầu hết các trường hợp thiết kế. Với ý nghĩa đó, tôi di chuyển nó ra khỏi tiêu đề đến khu vực chính với một thiết lập cột trong lưới.

Hy vọng điều này sẽ hữu ích.

Nguồn

2015-04-17 03:35:03 kavare

Tôi gặp sự cố tương tự với mã của mình. Bạn là người duy nhất chỉ ra tên lớp để tôi hỏi bạn điều này. Tôi đã thêm mã affix sử dụng javascript. Tôi cũng đã thêm các quy tắc css. Nhưng vấn đề là phần tử lấy lớp 'affix-top' khi tải trang, nhưng khi tôi cuộn, nó không thay đổi thành lớp' affix'. Nó vẫn còn là 'affix-top'. Tôi kiểm tra và thay đổi lớp theo cách thủ công và nó hoạt động như mong đợi. Bất kỳ giải pháp nào? – AtulBhatS

Bootstrap đóng không làm việc với lớp bootstrap

Trả lời

1. Hệ thống lưới khởi động

2. Bootstrap đóng

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