Bootstrap 4 zweispaltiges Layout

Die ppedv Website benötigt ein UI Freshup und bekommt nun Boostrap 4 (statt 3) spendiert. Weite Teile der Page  setzen auf ein 2-spaltiges Layout. Dies war bisher mit einem col-md-6 realisiert. Col für Spalte-md für Medium Device (media Breakpoint bei 768px) und 6 für 50% der 12 Grundspalten. In der mobilen Ansicht soll der switch auf einspaltig durchgeführt werden. Das hat in Bootstrap 3 ganz wunderbar geklappt. Eigentlich sollte das Tabellen Layout mit den Row und Col CSS Klassen weitestgehend gleich geblieben sein. Allerdings kommen sehr seltsame Spalten Breiten beim responsive HTML Experiment heraus.

col-md-6

Erst das Studium des Bootstrap.css Codes offenbart: es gibt keine Klasse col-md-6 mehr. Col-md-5 check, col-md-7 check, aber nichts dazwischen.

Da haben sich die Bootstrap Entwickler ein simples col-6 ausgedacht. Dieses findet sich nur in der Medium Media CSS Definition.

   1:  .col-6 {
   2:      -ms-flex: 0 0 50%;
   3:      flex: 0 0 50%;
   4:      max-width: 50%;
   5:    }

Die Spaltenbreite wird in Boostrap 4 in mobile first manier vom Small Device bis zum nächsten Media Breakpoint definiert. Am Smartphone soll in der Row die Column die volle Breite einnehmen und gestapelt (stacked) werden.

   1:  .col-12 {
   2:    -ms-flex: 0 0 100%;
   3:    flex: 0 0 100%;
   4:    max-width: 100%;
   5:  }

Der Trick ist also beide CSS Klassen zu kombinieren um ein responsive Layout hinzubekommen, das von 1-spaltig nach 2-spaltig wechselt.

   1:  <div class="row">
   2:      <div class="col-12 col-6" style="background-color:red">columne1</div>
   3:      <div class="col-12  col-6" style="background-color:silver">Spalte2</div>
   4:  </div>
Kommentare sind geschlossen