4 Spalten 2 Spalten mit Twitter Bootstrap
Ich habe ein 4-Spalten fluid-layout:
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">A</div>
<div class="span3">B</div>
<div class="span3">C</div>
<div class="span3">D</div>
</div>
</div>
[ A ][ B ][ C ][ D ]
Für mobile Geräte, bootstrap macht die Spalten einer unter anderen, die gut funktioniert:
[ A ]
[ B ]
[ C ]
[ D ]
Aber für tablets, ich möchte 2 Spalten von 2:
[ A ][ B ]
[ C ][ D ]
Ist es möglich dieses Verhalten nativ mit bootstrap?
- Es gibt keine solche Funktionalität zur Verfügung nativ, afaik.
- Ja, nicht nativ. Ich habe es selbst getan, obwohl durch das überschreiben einige der Bootstrap-CSS. Wären Sie daran interessiert, es zu sehen?
- Ok, das ist was ich dachte 🙁 Und ja, ich bin neugierig zu sehen, wie du es getan hast. 🙂
Du musst angemeldet sein, um einen Kommentar abzugeben.
Fand ich heraus, dass Zurb Foundation (http://foundation.zurb.com/docs/grid.php#threeBlockEx) bietet dieses fonctionality, aber ich möchte auch weiterhin mit Twitter Bootstrap. So ich habe es geschafft, fügen Sie eine benutzerdefinierte Regel basiert auf der Technik, dass Foundation verwendet :
Hinzufügen, um emilies Antwort Sie müssen auch zurücksetzen die Breite der Spalten an,
Müssen Sie nur das überschreiben der CSS-Datei für die Spannweiten in den
@media
Abfrage der entsprechenden Tabletten.So können Sie versuchen, so etwas wie dieses:
Natürlich, können Anpassungen vorgenommen werden müssen. Wegen der Polsterung und Margen, die Breite kann eigentlich nicht sein, 50%.
Hmm. Ich habe versucht, diese beiden Vorschriften in meiner CSS-und keiner von Ihnen arbeitete für mich. Es ist eine Schande, dass das fehlt in BS 2.0. Ich hoffe, Sie fügen Sie es in BS 3.0!
Dank,
JK