Làm thế nào để thay đổi các điều kiện truy vấn phương tiện truyền thông khởi động?

Question

Chúng tôi có các cài đặt bootstrap cho màn hình lớn như: -

/* Large Devices, Wide Screens */ 
@media only screen and (max-width : 1200px) { 

} 

Tôi muốn ghi đè lên đến max-width: 1920px. Làm thế nào tôi có thể làm điều này mà không cần hack lõi?

Lưu ý: Tôi duy trì phụ thuộc vào giao diện người dùng của mình thông qua bower, vì vậy tôi muốn các thay đổi được duy trì trên các tệp CSS tùy chỉnh. Có cách nào để "ghi đè" các cấu hình đó không?

Answer 1

Sử dụng trang tùy chỉnh trên tài liệu để tạo phiên bản tùy chỉnh.

http://getbootstrap.com/customize/#media-queries-breakpoints

Answer 2

Bạn chỉ cần cập nhật tập tin _variables.scss Bootstrap của. Đây là tất cả các biến có sẵn cho bạn để thay đổi các điểm ngắt:

$screen-xs:     480px !default; 
$screen-xs-min:    $screen-xs !default; 
$screen-phone:    $screen-xs-min !default; 

$screen-sm:     768px !default; 
$screen-sm-min:    $screen-sm !default; 
$screen-tablet:    $screen-sm-min !default; 

$screen-md:     992px !default; 
$screen-md-min:    $screen-md !default; 
$screen-desktop:    $screen-md-min !default; 

$screen-lg:     1200px !default; 
$screen-lg-min:    $screen-lg !default; 
$screen-lg-desktop:   $screen-lg-min !default; 

$screen-xs-max:    ($screen-sm-min - 1) !default; 
$screen-sm-max:    ($screen-md-min - 1) !default; 
$screen-md-max:    ($screen-lg-min - 1) !default; 

Tôi không chắc chắn đây có phải là điều bạn muốn nói "hack lõi", nhưng tôi đảm bảo không phải vậy. Các giá trị này là có nghĩa là phải được thay đổi, vì có thể xem theo nhận xét của riêng chúng trong tệp:

## Define the breakpoints at which your layout will change, adapting to different screen sizes.