Wie bekomme ich Bootstrap vier Spalten Rasterweite zwei Zeilen auf einer zweiten Spalte?

Wie bekomme ich Bootstrap vier Spalten Rasterweite zwei Zeilen auf einer zweiten Spalte?Wie bekomme ich Bootstrap vier Spalten Rasterweite zwei Zeilen auf einer zweiten Spalte?

Hallo, wenn jemand mir helfen kann, die Art von Portfolio-Raster mit 4 Spalten (siehe Bild enter image description here) zu erreichen, wo die zweite Spalte zwei Zeilen umfasst. (Plane, Bilder mit dem Hover-Untertitel-Effekt zu versehen).

Ich habe versucht, mit dieser Lösung, aber nicht die richtige gefunden. Links unten:

How can I get a Bootstrap column to span multiple rows?

Row span in Bootstrap 3?

How to make a div in the middle of two others to span multiple rows, like rowspan in tables

Twitter Bootstrap 3 rowspan and reorder

how to create complex grid in bootstrap 3, (column rowspan)

Twitter Bootstrap 3 rowspan and reorder

Vielen Dank im Voraus!

look the scheme

Quelle

2016-04-01 Jasmina

Versuchen Sie, nur eine Zeile zu verwenden, alle Floating-Element könnte den Trick tun. Wenn nicht, poste eine Geige, um sie zu testen. – Loenix

Es ist nicht wirklich möglich mit Bootstrap normalen Grid zu tun. Rowspan ist etwas, das Sie auf

s anwenden können. – niorad

Jeder Code, den Sie bereitstellen können? – Jay

Antwort

Unter der Annahme, alle Zellen die gleiche Höhe haben (wie die das Bild zeigt), alles, was Sie tun müssen, ist eine vier Säulen-Struktur zu erstellen, und in ihnen ein oder zwei Elemente setzen.

So etwas:

<div class="row"> 
 
    <div class="col-md-3"> 
 
    <div class="single-height"> 
 
     1 
 
    </div> 
 
    <div class="single-height"> 
 
     5 
 
    </div> 
 
    </div> 
 
    <div class="col-md-3"> 
 
    <div class="double-height"> 
 
     2 
 
    </div> 
 
    </div> 
 
    <div class="col-md-3"> 
 
    <div class="single-height"> 
 
     3 
 
    </div> 
 
    <div class="single-height"> 
 
     6 
 
    </div> 
 
    </div>  
 
    <div class="col-md-3"> 
 
    <div class="single-height"> 
 
     4 
 
    </div> 
 
    <div class="single-height"> 
 
     7 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2016-04-01 12:35:16 javinievas

danke, werde das versuchen. – Jasmina

Sie können dies nicht mit Bootstrap-Säulen-Grid-Stil. Die höchste Spalte wird die untere Zeile drücken. Sie können dies mit Mauerwerk tun, das sehr gut mit Bootstrap-Gitter-Säulen passt. Sehen Sie es hier Masonry page

Quelle

2016-04-01 13:42:48

Dies ist meine erste Post auf Stack-Überlauf und ich bin ziemlich neu in Web-Dev. Mauerwerk scheint wie eine gute Lösung für das Problem, wird erkunden, danke. – Jasmina

Ich möchte mein Portfolio-Raster wie auf dem Thema, nur ohne die Filterung sein. Denken Sie immer noch, dass Maurerwerk das Richtige ist? http://www.themezaa.com/html/h-code/home-architecture.html – Jasmina

in diesem Beispiel haben alle Boxen die gleiche Höhe, so Bootstrap sollte es gut genug sein, denke ich, aber wenn Ihre Bilder Höhe so Mauerwerk ist die nur wählen. Überprüfen Sie diese Seite http://www.kristianhammerstad.com/ –

Wie bekomme ich Bootstrap vier Spalten Rasterweite zwei Zeilen auf einer zweiten Spalte?

Antwort

Verwandte Themen