Tắt MỘT trong các bố cục đáp ứng Bootstrap của Twitter

Question

Tôi muốn vô hiệu hóa một trong các bố cục Responsive. Dù bố cục nhỏ thứ hai là gì trước khi nó chuyển sang chế độ xem di động.

Answer 1

Nếu bạn đang biên dịch từ tệp LESS, điều này khá dễ dàng. Mở ra responsive.less và trong "MEDIA QUERIES" nhận xét hoặc xóa tuyên bố @import cho bất kỳ bố cục nào bạn không muốn. Ví dụ, nếu bạn không muốn Viên nén để máy tính để bàn thông thường một, mã sẽ trông như thế này:

// MEDIA QUERIES 
// ------------------ 

// Phones to portrait tablets and narrow desktops 
@import "responsive-767px-max.less"; 

// Tablets to regular desktops 
// @import "responsive-768px-979px.less"; // commented this out because I don't like it 

// Large desktops 
@import "responsive-1200px-min.less"; 

Sau đó chỉ biên dịch lại bootstrap.less và bạn nên được thực hiện.

Nếu, mặt khác, bạn không biên soạn từ bootstrap.less và đang sử dụng trực tiếp bootstrap-responsive.css, bạn có thể tìm kiếm truy vấn phương tiện cho thiết bị cụ thể và xóa/nhận xét phần đó.

Ví dụ, loại bỏ các tablet chân dung người ta sẽ trông giống như (trong bootstrap-responsive.css):

/* some CSS code above this */ 

.hidden-desktop { 
    display: none !important; 
} 

/* comment out the following rule entirely in order to disable it */ 
/* 
@media (max-width: 767px) { 
    .visible-phone { 
    display: inherit !important; 
    } 
    .hidden-phone { 
    display: none !important; 
    } 
    .hidden-desktop { 
    display: inherit !important; 
    } 
    .visible-desktop { 
    display: none !important; 
    } 
}*/ /* stop commenting out, we want everything below this */ 

@media (min-width: 768px) and (max-width: 979px) { 
    .visible-tablet { 
    display: inherit !important; 
    } 

/* More CSS code follows */ 

Để tìm ra @media truy vấn tương ứng với thiết bị nào chiều rộng, hãy nhìn vào http://twitter.github.com/bootstrap/scaffolding.html#responsive; truy vấn phương tiện được cung cấp cùng với kích thước thiết bị mà chúng tương ứng.

Answer 2

• gọi css của bạn sau cuộc gọi khởi động.
• Trong bản sao css của bạn hàng, span css tạo bố trí bạn muốn và đặt nó trong css của bạn.
• thay đổi các truy vấn phương tiện truyền thông để một cái gì đó như thế này (Chiều rộng tối đa là chiều rộng bạn muốn dính vào):

@media (max-width: 1200px) { 
    .row { 
     margin-left: -30px; 
     *zoom: 1; 
    } 
    .row:before, 
    .row:after { 
     display: table; 
     content: ""; 
     line-height: 0; 
    } 
    .row:after { 
     clear: both; 
    } 
    [class*="span"] { 
     float: left; 
     margin-left: 30px; 
    } 
    .container, 
    .navbar-static-top .container, 
    .navbar-fixed-top .container, 
    .navbar-fixed-bottom .container { 
     width: 1170px; 
    } 
    .span12 { 
     width: 1170px; 
    } 
    .span11 { 
     width: 1070px; 
    } 
    .span10 { 
     width: 970px; 
    } 
    .span9 { 
     width: 870px; 
    } 
    .span8 { 
     width: 770px; 
    } 
    .span7 { 
     width: 670px; 
    } 
    .span6 { 
     width: 570px; 
    } 
    .span5 { 
     width: 470px; 
    } 
    .span4 { 
     width: 370px; 
    } 
    .span3 { 
     width: 270px; 
    } 
    .span2 { 
     width: 170px; 
    } 
    .span1 { 
     width: 70px; 
    } 
    .offset12 { 
     margin-left: 1230px; 
    } 
    .offset11 { 
     margin-left: 1130px; 
    } 
    .offset10 { 
     margin-left: 1030px; 
    } 
    .offset9 { 
     margin-left: 930px; 
    } 
    .offset8 { 
     margin-left: 830px; 
    } 
    .offset7 { 
     margin-left: 730px; 
    } 
    .offset6 { 
     margin-left: 630px; 
    } 
    .offset5 { 
     margin-left: 530px; 
    } 
    .offset4 { 
     margin-left: 430px; 
    } 
    .offset3 { 
     margin-left: 330px; 
    } 
    .offset2 { 
     margin-left: 230px; 
    } 
    .offset1 { 
     margin-left: 130px; 
    } 
} 

Answer 3

Nếu bạn không biên dịch LESS, cách tốt nhất mà tôi đã tìm thấy là đi vào bootstrap.css và nhận xét kích thước bạn không muốn hoạt động. CSS được sắp xếp khá tốt và việc vô hiệu hóa một trong các kích thước này dường như không ảnh hưởng đến bất kỳ thứ gì khác.

(Tất nhiên, bạn phải cẩn thận bạn không kích hoạt lại chúng khi cập nhật Bootstrap.)

Answer 4

Như một sự cải tiến để spinningarrow 's cách để làm điều này khi sử dụng LESS là để thiết lập các @gridColumnWidth768 và @gridGutterWidth768 để phù hợp với @gridColumnWidth và @gridGutterWidth như vậy:

@gridColumnWidth768: @gridColumnWidth; 
@gridGutterWidth768: @gridGutterWidth; 

như một quy luật, tôi cố gắng rời khỏi file nhà cung cấp độc lập và chỉ chỉnh sửa chúng như một phương sách cuối cùng. Điều này cho phép tôi khắc phục sự cố này mà không phải chỉnh sửa các tệp khởi động lõi.