Làm thế nào để sử dụng Twitter Bootstrap 3 cho trang web không đáp ứng?

Question

Như bạn có thể đọc trên trang của họ, mới Bootstrap 3 là "điện thoại di động đầu tiên":

Với Bootstrap 2, chúng tôi đã thêm phong cách thân thiện với điện thoại di động tùy chọn cho khía cạnh quan trọng của khuôn khổ này. Với Bootstrap 3, chúng tôi đã viết lại dự án để thân thiện với thiết bị di động ngay từ đầu. Thay vì thêm kiểu di động tùy chọn, chúng được nướng ngay vào lõi. Trong thực tế , Bootstrap là thiết bị di động đầu tiên. Các kiểu di động đầu tiên có thể được tìm thấy trong toàn bộ thư viện thay vì trong các tệp riêng biệt.

Làm cách nào để vô hiệu hóa phản hồi? Tôi muốn rằng trang web của tôi sẽ không tự sắp xếp lại cho máy tính bảng hoặc thiết bị di động.

Answer 1

Đối với một nhiều hơn giải thích thủ tục thấy How to use Twitter Bootstrap 3 for non-responsive site

Từ Bootstrap documentation (cộng với một số giải thích):

Để tắt tính năng đáp ứng, hãy làm theo các bước sau. Xem nó trong hành động trong mẫu được sửa đổi bên dưới.

1) Remove (hoặc chỉ cần không thêm) viewport <meta> đề cập trong các tài liệu CSS

tự giải thích

2) Tháo max-width trên .container cho tất cả các tầng lưới có chiều rộng tối đa: không có gì quan trọng; và đặt chiều rộng thông thường như chiều rộng: 970px ;. Hãy chắc chắn rằng điều này xuất hiện sau khi Bootstrap CSS mặc định. Bạn có thể tùy ý tránh điều quan trọng với các truy vấn phương tiện hoặc một số bộ chọn .

Thêm phong cách này:

.container{ 
    max-width: none !important; 
    width: 970px; 
} 

3) Nếu sử dụng NavBars, undo tất cả các navbar sụp đổ và mở rộng hành vi (điều này là quá nhiều để hiển thị ở đây, vì vậy peep ví dụ) .

mở variables.less và thiết lập các biến:

@grid-float-breakpoint-0

@screen-xs-max-0 (điều này sẽ được cố định; đọc here)

4) Đối với bố trí lưới, làm sử dụng các lớp .col-xs- * ngoài hoặc tại chỗ của những cái vừa/lớn. Đừng lo lắng, thiết bị cực nhỏ cân chỉnh tới tất cả các độ phân giải, vì vậy bạn được đặt ở đó.

tự giải thích

Bạn vẫn sẽ cần Respond.js cho IE8 (kể từ khi truy vấn phương tiện truyền thông của chúng tôi là vẫn còn đó và cần phải được chọn). Điều này chỉ vô hiệu hóa "di động trang web" của Bootstrap.

Answer 2

Nếu không có các thay đổi lớn đối với nguồn, nó dường như không thể.

Các liên kết sau đây chi tiết về những thay đổi cần thiết: http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/

Answer 3

Vâng, tôi đang tìm kiếm điều tương tự. Tôi đã không kiểm tra nó ra được nêu ra, vì vậy tôi không thể chứng thực cho nó chức năng, nhưng đây là một phiên bản với đáp ứng đưa ra:

https://github.com/bassjobsen/non-responsive-tb3

Answer 4

Kiểm tra ra câu trả lời ở đây bởi Jay Douglass định chi tiết cách ghi đè các các biến breakpoint truy vấn phương tiện để vô hiệu hóa các tính năng đáp ứng. Đó là một giải pháp đơn giản đòi hỏi sự thay đổi tối thiểu.

How to remove responsive features in Twitter Bootstrap 3?

Answer 5

Các Bootstrap 3 tài liệu thực sự chứa một đoạn văn cho vấn đề này: http://getbootstrap.com/getting-started/#disable-responsive

Answer 6

Với nỗ lực nhỏ, bạn có thể đạt được điều đó.

1) Di chuyển khung nhìn

2) Thêm .container{ max-width: none !important; width: 970px; } đến file css của bạn

3) Nếu sử dụng NavBars, undo tất cả các navbar sụp đổ và mở rộng hành vi

4)

Đối với bố cục lưới, hãy sử dụng các lớp .col-xs- * ngoài hoặc ở vị trí của các hình vừa/lớn. Đừng lo lắng, thiết bị cực nhỏ cân chỉnh tới tất cả các độ phân giải, vì vậy bạn được đặt ở đó.

Bạn có thể làm theo các liên kết dưới đây:

http://getbootstrap.com/getting-started/#disable-responsive