Frage

Wie kann ich das folgende zweispaltige Layout in Bootstrap erreichen?

  • Spalte 1: Die Breite passt sich an die verfügbare Größe zwischen einer min und maximalen Breite an
  • Spalte 2: Breite der festen Größe

Zum Beispiel, wenn ich:

  • Spalte 1 min Breite: 300px
  • Spalte 1 max. Breite: 800px
  • Spalte 2 Breite: 400px

In einer Auflösung mit einer Breite von 800px würde ich erwarten, dass beide Spalten 400px breit sind. In einer Auflösung mit dem verfügbaren 2000px würde ich erwarten, dass die erste Spalte 800px, die zweite Spalte 400 Pixel, und es würde sich am Bildschirm mit 800 PX leer befinden.

War es hilfreich?

Lösung

Hart, weil Bootstrap für reaktionsschnelle, nicht statische ... nützlich ist ...

Kann es mit dieser Weise richtig sein: http://bootply.com/98214

html

<div class="row">
  <div id="col1" class="col-xs-6 col-md-5">coco 1</div>
  <div id="col2" class="col-xs-6 col-md-2">coco 2</div>
</div>

CSS

#col1{
  background:green;
  max-width:800px !important;
}

#col2{
  background:yellow;
  max-width:400px !important;
}

Sie sollten keine Minwidth verwenden, da es im Falle eines extra kleinen Geräts keinen guten Render hat

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top