Wie ändert man die Bootstrap-Medienabfragebedingungen?

Question

Wir haben Bootstrap-Einstellungen für großen Bildschirm als: -

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

} 

I bis max-width außer Kraft setzen möge: 1920px. Wie kann ich das tun, ohne den Kern zu hacken?

Hinweis: Ich halte meine Front-End-Abhängigkeiten über Bower, also möchte ich, dass die Änderungen an den benutzerdefinierten CSS-Dateien beibehalten werden. Gibt es eine Möglichkeit, diese Konfigurationen zu überschreiben?

Answer 1

Verwenden Sie die Seite anpassen in der Dokumentation, um eine benutzerdefinierte Version zu erstellen.

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

Answer 2

Sie müssen nur _variables.scss Datei Bootstrap ist zu aktualisieren. Dies sind alle Variablen zur Verfügung für die Änderung der Haltepunkte:

$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; 

Ich bin mir nicht sicher, ob dies ist, was Sie gemeint mit „Hacken den Kern“, aber ich versichere es ist nicht so. Diese Werte sind gemeint, zu ändern, wie durch ihre eigenen Kommentare in der Datei gesehen werden kann:

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