Zum Hauptinhalt springen
Blog & News

Aktuelles & Updates von
Joomla, Wordpress und Co.

News, HowTos und Tutorials rund um Webdesign, Webentwicklung, Webhosting und Digitalisierung.

Blog & News

Bootstrap Responsivität deaktivieren

10.06.2014 · 1 Min Lesezeit

Bootstrap passt deine Seiten automatisch verschiedenen Bildschirmgrößen an. Hier erfährst du, wie du diese Funktion deaktivieren kannst.

 

In Bootstrap 3 - http://holdirbootstrap.de/los-gehts/#disable-responsive

 

  1. Entferne das Viewport-<meta>-Tag, das in der CSS-Doku erläutert wird
  2. Überschreibe die Breite (width) beim .container für jeden Umbruchpunkt des Rasters, z.B. mit width: 970px !important;. Diesen Schnipsel musst du unbedingt nach Bootstraps CSS einfügen. Du kannst optional statt !important verschiedene Media-Queries oder komplizierte Selektoren verwenden.
  3. Falls du Navbars verwendest, musst du alle Funktionen zum Verbergen und Ausklappen der Navbar entfernen.
  4. Für Rasterlayouts solltest du zusätzlich zu oder statt den mittleren/großen die .col-xs-*-Klassen verwenden. Keine Sorge, das extra-kleine Raster skaliert sich auf alle Bildschirmgrößen.

 

In Bootstrap 2

 

  • Entfernen aller @media{}Querys aus der Boostrap CSS
  • Eine eigene Bootstrap CSS OHNE "responsive features" erstellen: http://twitter.github.com/bootstrap/customize.html
  • Downloaden einer bereits gesäuberten Bootstrap CSS Datei - http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap.min.css

 

Zurück zur Übersicht