Làm thế nào để tắt tính năng đáp ứng hoàn toàn từ Twitter Bootstrap 3?

Question

Làm cách nào để tắt tính năng phản hồi trong Bootstrap 3?

Tôi chỉ muốn phát triển phiên bản dành cho máy tính để bàn và khi kích thước khác thì nó vẫn xuất hiện như phiên bản dành cho máy tính để bàn.

Twitter.com thực hiện việc này. Nếu bạn cố gắng thay đổi kích thước, không có gì xảy ra với giao diện người dùng trong khi trang web của tôi đang thiết kế lại tất cả các phần tử.

Ví dụ về làm thế nào tôi muốn nó:

Dù sao tại làm thế nào để tắt responiveness? Tất cả trợ giúp đều được đánh giá cao.

Ngoài ra gần đây đã đọc rằng trong Bootstrap 2.0 bạn chỉ cần loại bỏ CSS tăng cường theo ngữ cảnh, nhưng trong 3.0 được đưa vào một tệp css.

Cảm ơn.

Answer 1

EDIT: Mã của tôi dưới đây được viết cho v3.0.0RC2, nhưng trong v3.0.0 các tài liệu có một phần cụ thể về câu hỏi này: http://getbootstrap.com/getting-started/#disable-responsive

Sử dụng col-xs-X lớp vì chúng là độ rộng tỷ lệ không đổi. Sau đó, phản hồi đến từ .container bằng cách sử dụng max-width ở các kích thước phương tiện khác nhau. Bạn có thể xác định sự thay thế của riêng bạn để .container và sử dụng mọi thứ khác như bình thường:

Fiddle cho ví dụ dưới đây: http://jsfiddle.net/xTePL/

HTML:

<!-- Don't use .container at all or you will have to 
    override a lot of responsive styles. --> 
<div class="container-non-responsive"> 
    <div class="row"> 
    <div class="col-xs-4"> 
     <h1>Welcome to Non-responsive Land</h1> 
    </div> 
    <div class="col-xs-8"> 
     <!-- More content, more content --> 
    </div> 
    </div> 
</div> 

CSS:

.container-non-responsive { 
    /* Margin/padding copied from Bootstrap */ 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 15px; 
    padding-right: 15px; 

    /* Set width to your desired site width */ 
    width: 1170px; 
} 

Answer 2

tôi thích giải pháp (được chấp nhận) của @ssorallen. Giải pháp này không tắt tất cả các tính năng đáp ứng khi được yêu cầu.

@grid-float-breakpoint (mặc định ở 768px) sẽ cho phép trình đơn của bạn thu gọn và đặt căn chỉnh của nhãn biểu mẫu dựa trên chiều rộng màn hình. Chiều rộng của các modals và carousels cũng phụ thuộc vào cài đặt này.

Để biết thêm thông tin, xem: http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/

cập nhật kiểm tra các liên kết dưới đây từ @skelly quá. Lưu ý điều này vẫn không thay đổi lưới-float-breakpoint cũng không giải pháp này làm giảm mã. Các phiên bản khác của TB3 sẽ có thể là split up some less files. Điều này sẽ giúp dễ dàng biên dịch một phiên bản không đáp ứng.

Answer 3

Chỉ cần tìm kiếm để tắt tất cả truy vấn phương tiện và nhận xét chúng trong tệp bootstrap.css. Nó không mất nhiều hơn một vài phút.

Sau đó, bạn cần đặt chiều rộng cố định thành div bên ngoài để đặt nội dung trang của bạn. Điều này thường là .container trong bootstrap hoặc một cái gì đó như #wrapper cũng phổ biến. 960px hoặc những gì đã từng phù hợp với trang web của bạn.

Bạn cũng cần xóa hoặc nhận xét thẻ meta viewport trong đầu HTML của mình. Nếu không có một thì cũng tốt (mặc dù bạn sẽ cần phải thêm một để thực hiện nếu bạn muốn nó đáp ứng).Nó trông giống như thế này:

Answer 4

Đây là những gì làm việc cho tôi:

<meta name='viewport' content='width=1190'> 

Tôi muốn có một chút của một lề xung quanh nội dung của tôi vì vậy tôi cũng đã làm

.container{ 
    width: 1150px !important; 
} 

Tested nó trên iPad và iPhone.