HTML Bootstrap: Dynamische Collapse-Divs über volle Seitenbreite?

[.t0x]

Hi,

folgendes Problem: Mittels PHP Loop lade ich mir alle vorhandenen viele Bilder auf eine Seite. Die Bilder befinden sich in einem Container (gruen) und haben die Klassen col-12 col-md-4.



Nun moechte ich bei einem Click auf das jeweilige Bild ein Div (blau) unter dem jeweiligen Bild einblenden, in dem ich Inhalt nachladen moechte, welches ueber die gesamte Seitenbreite (ggf. auch nur Containerbreite) reicht:



Und genau daran scheitere ich gerade. Ein Collapse Div in jeweiliger Bildgroeße bekomme ich ohne weiteres wie folgt umgesetzt:

        <div class="img-container">
            <div class="row">
                @foreach($images as $img)
                <div class="col-12 col-md-4">

                    @foreach($img['img'])
                    <a id="imgid-{{$i}}" class="show-detailview" role="button" data-toggle="collapse" href="#collapseExample-{{$i}}" aria-expanded="false" aria-controls="collapseExample">
                        <img class="img-fluid" src="xxx"/>
                    </a>
                    @endforeach
                    <div class="collapse" id="collapseExample-{{$i}}">
                        <div class="imgtoggle">
                            ...
                        </div>
                    </div>
                    @php ($i++)
                </div>
                @endforeach
            </div>
        </div>

Nur ueber volle Seitenbreite wird's dann halt schwierig. Gibt's da vllt. ganz simple irgendwelche Helferklassen von Bootstrap, die ich einfach noch nicht entdeckt habe? Ein verstecktes Div mit fixer/absoluter Positionierung, kann's irgendwie auch nicht sein. Das eingeblendete Div soll ja ggf. auch unter Bild D bzw. X eingeblendet werden.



Ich befinde mich aktuell in nem Tunnelmodus, weshalb ich hier einfach mal nachhaken moechte. Vllt. hat ja jemand eine rettende Idee fuer mich? Danke vorab!

 

[AndrewPoison]

Vor exakt dem gleichen Problem standen wir vor 2 Wochen - gelöst haben wir es am Ende mit JQuery, welches berechnet wohin eine neue Row mit col-*-12 müsste und darin den Ajax-Inhalt aufweist. Das ganze dann noch mit einem animate() verbunden und schon sieht die Sache recht ansehnlich aus.

Ob es eine Pur-CSS-Lösung (oder bereits gescheite Build-In-Tools) dafür gibt, kann ich nicht sagen - eine kurze Suche brachte zumindest nichts zu Tage, da aber die Zeit drückte haben wir eben fix mittels JQuery selbst die Funktionalität hinzugefügt.

 

[Tada100]

Dierse Seite könnte dir helfen, dort kannst du auch im Browser schnell Code ausprobieren.


Hab dort gerade ein paar Seiten überflogen, und denke das es dir weiterhelfenn wird.

 

[Einhörnchen]

Das Problem ist weniger die volle Breite: Hierfür würde ich den blauen div einfach als col-md-12 ausgeben und nicht innerhalb deines bild div col-md-4 rendern.

Was eher problematisch ist: Du musst ja wissen, ob gerade 3, 2 oder 1 div pro Zeile angezeigt werden und dann den col-xs-12 Ziel nach dem letzten col-md-4 der aktuellen Zeile einblenden.