Wie kalibriere ich einen Iframe in einem Twitter Bootstrap Fluid Layout?

8

Ich habe ein Twitter-Bootstrap-Layout mit zwei Spalten und möchte einen Iframe in einem der Bereiche (er enthält das Google-Aufgaben-Widget - Ссылка ). Wie stelle ich die Breite richtig ein? Ich habe herausgefunden, wie man den Stil so einstellt, dass er einen Rand hat (um ihn als externen Seiteninhalt zu unterscheiden), aber ich kann nicht erreichen, dass er eine der Spalten richtig füllt. Das habe ich derzeit:

%Vor%

Vollständiges Beispiel (als HTML-Datei speichern): Ссылка

    
gatoatigrado 23.11.2012, 21:38
quelle

1 Antwort

14

Verwenden Sie die Klasse row-fluid zum Definieren einer Zeile und die spanX-Klassen zum Definieren von Spalten. Wie so:

%Vor%

Allerdings: Die Xs in spanX müssen für jede Zeile bis zu 12 addieren. Im obigen Beispiel müssten Sie also den Inhalt der anderen Spalte in ein Tag mit der Klasse span6 umbrechen oder Sie können die Klasse offset6 für das iframe verwenden, wenn dies der einzige Inhalt in dieser bestimmten Zeile ist um es rechts auszurichten.

Damit eine Spalte breiter als die andere ist, können Sie sie ändern, indem Sie das X in spanX ändern. Achten Sie darauf, dass sie für eine Zeile bis zu 12 ergibt.

Wenn Sie sich fragen, wie Sie eine Spalte auf eine bestimmte Breite bringen können: Der ganze Punkt eines fließenden Gitters besteht darin, nicht bestimmte Breiten zu verwenden. Sie legen die Breite des Containers fest (vorzugsweise mit relativen Einheiten, damit sich der Inhalt an die Größe des Ansichtsfensters anpasst), und jede Spalte ist 1/12 der Breite des Containers. Wenn Sie tun möchten, dass die Breite genau gesteuert wird, können Sie dem Container immer eine bestimmte Breite zuweisen, damit die gewünschte Spalte eine Breite von 1/12 der Breite des Containers haben kann. I.e. Wenn Sie möchten, dass die Spalte 400 Pixel breit ist, können Sie den Container 800 Pixel breit machen und die Klasse span6 für die Spalte verwenden. Oder verwenden Sie span3 , um es 200px breit usw. zu machen.

Ich habe alles sehr gut in den Dokumenten erklärt: Ссылка

    
Joe Dyndale 23.11.2012 21:48
quelle