Bootstrap "Collapse" bricht das Raster Layout

Question

Ich versuche, eine kollabierbare Zeile im Bootstrap zu erstellen. Ich habe es aufgereiht, so dass es drei Spalten in dieser Reihe gibt (d. H. col-xx-4). Die Spalten sind entsprechend dem Bootstrap-Grid-System aufgereiht, wenn die Zeile, in der sie enthalten sind, NICHT kollabiert ist (d. H. Es gibt drei Spalten in der Zeile).

Sobald ich jedoch ein Kollapsattribut hinzufüge, brechen sie die Gitterformation und jede Spalte nimmt eine volle Reihe auf, als ob es wäre. Anstatt in der gleichen Zeile auszurichten, erzeugt jede Spalten-Div aus irgendeinem Grund zwei gleiche Breitenränder links und rechts, die die volle Zeilenbreite einnehmen, wiederum als wären sie , obwohl sie col-xx-4 sind.

Um einen Kontext bereitzustellen, wird für jede Spalte div width der Wert 100px und für die Zeilenbreite 330px festgelegt. Dies bietet genügend Platz für alle drei div-Spalten in der Zeile mit dem Attribut col-xx-4. Der Rand, der automatisch generiert wird, wenn ich "collapse" hinzufüge, macht es jedoch so, dass die Spalten nicht horizontal in derselben Zeile ausgerichtet sind, sondern vertikal ausgerichtet sind, wobei jede eine vollständige Zeile einnimmt.

Hat jemand in der Vergangenheit ein ähnliches Problem erlebt? Gibt es einen Grund, warum das Hinzufügen von "Kollaps" die Gitterstruktur zerstören könnte?

Answer 1

Versuchen wie folgt aus:

<div class="collapse" id="collapseExample"> 
    <div class="row"> 
    <div class="col-xx-4"></div>..... 
    </div> 
</div>