Twitter bootstrap: thoát khỏi màn hình lớn 1200px như thế nào?

Question

Nếu bạn nhìn vào: http://twitter.github.com/bootstrap/scaffolding.html#responsive, chúng có các danh mục cho gần như mọi thiết bị. Tôi muốn loại bỏ mục nhập thiết bị hỗ trợ cuối cùng:

Large display 1200px and up 70px 30px 

Tôi là một lập trình viên phụ trợ, không phải là nhà thiết kế, vì vậy kiến ​​thức css của tôi bị giới hạn. Ai đó có thể chỉ cho tôi các tập tin tôi sẽ cần phải sửa đổi để thoát khỏi hỗ trợ cho màn hình lớn?

Cảm ơn!

(PS nếu có ai đang tự hỏi tại sao tôi sẽ làm được điều này, đó là tiêu chuẩn của công ty blah blah blah 1024px blah blah.)

Answer 1

Ok đây không phải là quá khó, bắt đầu trên đường dây 437 của bootstrap-responsive.css, loại bỏ toàn bộ phần này:

@media (min-width: 1200px) { 
... 
} 

Bây giờ chỉ cần thay đổi điều này một dòng

@media (max-width: 979px) { 

này:

@media (min-width: 1200px) { 

dễ dàng hack!

EDIT lời giải thích tốt hơn:

Nếu bạn nhìn vào bootstrap-responsive.css, và bạn nhìn vào tất cả các crap trừ "Media Queries" bạn muốn được trái với cơ bản Khái quát sau đây:

/* Landscape phones and down */ 
    @media (max-width: 480px) { ... } 

    /* Landscape phone to portrait tablet */ 
    @media (max-width: 767px) { ... } 

    /* Portrait tablet to landscape and desktop */ 
    @media (min-width: 768px) and (max-width: 979px) { ... } 

    /* Desktop */ 
    @media (max-width: 979px) { ... } 

    /* Large desktop */ 
    @media (min-width: 1200px) { ... } 

Xem cách nó dần dần tăng lên? Những gì tôi đã làm là xóa phần cuối cùng, sau đó thay đổi phần thứ 2 thành vị trí cuối cùng.

EDIT:

BTW, nếu bạn sử dụng trình hướng dẫn boostrap tùy biến, bạn có thể làm điều này trên GUI của họ bằng cách bỏ chọn hỗ trợ màn hình lớn.

Answer 2

Một giải pháp thay thế cho việc này là đặt các biến lưới 1200px thành các giá trị đó cho các giá trị lưới thông thường. Với phương pháp này, bạn có thể tránh cập nhật nguồn và tránh các vấn đề về nâng cấp:

@ gridColumnWidth1200: 60px;

@ gridGutterWidth1200: 20px;

Answer 3

xuất sắc nhất nhưng chỉ cần loại bỏ:

@media (min-width: 1200px) { ... } 

và nó sẽ chỉ bao giờ sử dụng các định dạng cho @media (max-width: 979px) cho tất cả các máy tính để bàn kích thước

Answer 4

Nếu bạn đang sử dụng phiên bản maxcdn của bootstrap hoặc chỉ cần không muốn chạm vào nguồn, chỉ cần dán các css sau đây sau khi tải bản định kiểu bootstrap.

@media (min-width: 1200px) { 
    .container, 
    .navbar-static-top .container, 
    .navbar-fixed-top .container, 
    .navbar-fixed-bottom .container { 
     width: 940px; 
    } 
    .row-fluid { 
     width: 100%; 
     *zoom: 1; 
    } 
    .row-fluid:before, 
    .row-fluid:after { 
     display: table; 
     content: ""; 
     line-height: 0; 
    } 
    .row-fluid:after { 
     clear: both; 
    } 
    .row-fluid [class*="span"] { 
     display: block; 
     width: 100%; 
     min-height: 30px; 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     box-sizing: border-box; 
     float: left; 
     margin-left: 2.127659574468085%; 
     *margin-left: 2.074468085106383%; 
    } 
    .row-fluid [class*="span"]:first-child { 
     margin-left: 0; 
    } 
    .row-fluid .controls-row [class*="span"] + [class*="span"] { 
     margin-left: 2.127659574468085%; 
    } 
    .row-fluid .span12 { 
     width: 100%; 
     *width: 99.94680851063829%; 
    } 
    .row-fluid .span11 { 
     width: 91.48936170212765%; 
     *width: 91.43617021276594%; 
    } 
    .row-fluid .span10 { 
     width: 82.97872340425532%; 
     *width: 82.92553191489361%; 
    } 
    .row-fluid .span9 { 
     width: 74.46808510638297%; 
     *width: 74.41489361702126%; 
    } 
    .row-fluid .span8 { 
     width: 65.95744680851064%; 
     *width: 65.90425531914893%; 
    } 
    .row-fluid .span7 { 
     width: 57.44680851063829%; 
     *width: 57.39361702127659%; 
    } 
    .row-fluid .span6 { 
     width: 48.93617021276595%; 
     *width: 48.88297872340425%; 
    } 
    .row-fluid .span5 { 
     width: 40.42553191489362%; 
     *width: 40.37234042553192%; 
    } 
    .row-fluid .span4 { 
     width: 31.914893617021278%; 
     *width: 31.861702127659576%; 
    } 
    .row-fluid .span3 { 
     width: 23.404255319148934%; 
     *width: 23.351063829787233%; 
    } 
    .row-fluid .span2 { 
     width: 14.893617021276595%; 
     *width: 14.840425531914894%; 
    } 
    .row-fluid .span1 { 
     width: 6.382978723404255%; 
     *width: 6.329787234042553%; 
    } 
    .row-fluid .offset12 { 
     margin-left: 104.25531914893617%; 
     *margin-left: 104.14893617021275%; 
    } 
    .row-fluid .offset12:first-child { 
     margin-left: 102.12765957446808%; 
     *margin-left: 102.02127659574467%; 
    } 
    .row-fluid .offset11 { 
     margin-left: 95.74468085106382%; 
     *margin-left: 95.6382978723404%; 
    } 
    .row-fluid .offset11:first-child { 
     margin-left: 93.61702127659574%; 
     *margin-left: 93.51063829787232%; 
    } 
    .row-fluid .offset10 { 
     margin-left: 87.23404255319149%; 
     *margin-left: 87.12765957446807%; 
    } 
    .row-fluid .offset10:first-child { 
     margin-left: 85.1063829787234%; 
     *margin-left: 84.99999999999999%; 
    } 
    .row-fluid .offset9 { 
     margin-left: 78.72340425531914%; 
     *margin-left: 78.61702127659572%; 
    } 
    .row-fluid .offset9:first-child { 
     margin-left: 76.59574468085106%; 
     *margin-left: 76.48936170212764%; 
    } 
    .row-fluid .offset8 { 
     margin-left: 70.2127659574468%; 
     *margin-left: 70.10638297872339%; 
    } 
    .row-fluid .offset8:first-child { 
     margin-left: 68.08510638297872%; 
     *margin-left: 67.9787234042553%; 
    } 
    .row-fluid .offset7 { 
     margin-left: 61.70212765957446%; 
     *margin-left: 61.59574468085106%; 
    } 
    .row-fluid .offset7:first-child { 
     margin-left: 59.574468085106375%; 
     *margin-left: 59.46808510638297%; 
    } 
    .row-fluid .offset6 { 
     margin-left: 53.191489361702125%; 
     *margin-left: 53.085106382978715%; 
    } 
    .row-fluid .offset6:first-child { 
     margin-left: 51.063829787234035%; 
     *margin-left: 50.95744680851063%; 
    } 
    .row-fluid .offset5 { 
     margin-left: 44.68085106382979%; 
     *margin-left: 44.57446808510638%; 
    } 
    .row-fluid .offset5:first-child { 
     margin-left: 42.5531914893617%; 
     *margin-left: 42.4468085106383%; 
    } 
    .row-fluid .offset4 { 
     margin-left: 36.170212765957444%; 
     *margin-left: 36.06382978723405%; 
    } 
    .row-fluid .offset4:first-child { 
     margin-left: 34.04255319148936%; 
     *margin-left: 33.93617021276596%; 
    } 
    .row-fluid .offset3 { 
     margin-left: 27.659574468085104%; 
     *margin-left: 27.5531914893617%; 
    } 
    .row-fluid .offset3:first-child { 
     margin-left: 25.53191489361702%; 
     *margin-left: 25.425531914893618%; 
    } 
    .row-fluid .offset2 { 
     margin-left: 19.148936170212764%; 
     *margin-left: 19.04255319148936%; 
    } 
    .row-fluid .offset2:first-child { 
     margin-left: 17.02127659574468%; 
     *margin-left: 16.914893617021278%; 
    } 
    .row-fluid .offset1 { 
     margin-left: 10.638297872340425%; 
     *margin-left: 10.53191489361702%; 
    } 
    .row-fluid .offset1:first-child { 
     margin-left: 8.51063829787234%; 
     *margin-left: 8.404255319148938%; 
    } 
} 

Về cơ bản nó thực thi 960px css cho 1200px.

Answer 5

Không cần phải hack hoặc cập nhật các tệp CSS bootstrap. Bạn có thể vô hiệu hóa các hiệu ứng bằng cách hạn chế container để phát triển hơn nữa.Sử dụng:

.container-fluid, 
.container { 
    // Disable large-desktop breakpoint. 
    max-width: $container-md; 
} 

Giá trị $container-md thường 970px, trừ khi bạn đã thay đổi $grid-gutter-width. Đối với LESS, hãy thay thế $ các biến có số @. Đối với CSS thông thường, hãy thay thế biến bằng kích thước pixel được mã hóa cứng.