Bootstrap-Spalten mit gestapelten Bildern: müssen die gleiche Spaltenhöhe haben

Ich habe einen Bootstrap-Bereich mit gestapelten Bildern und das Problem ist, dass ich möchte, dass die zweite und dritte Spalte immer die gleiche Höhe wie die erste Spalte haben. Ich kann keine Lösung für die zweite und dritte Spalte finden, weil sie in der Höhe fluktuieren, wenn ich auf verschiedene Ansichtsgrößen umschalte. Es wäre ideal, sie immer nach unten und oben ausrichten zu lassen.Bootstrap-Spalten mit gestapelten Bildern: müssen die gleiche Spaltenhöhe haben

.gallery { 
 
\t min-height: 980px; 
 
} 
 
    
 
.gallery .row{ 
 
\t display: -webkit-box; 
 
\t display: -webkit-flex; 
 
\t display: -ms-flexbox; 
 
\t display: flex; 
 
}

<div class="container-fluid gallery"> 
 

 
    <div class="row"> 
 
    <div class="col-sm-5"> 
 
     <a href="#"><img src="http://lorempixel.com/528/980/technics" class="img-responsive"></a> 
 
    </div> 
 
    
 
    <div class="col-sm-4"> 
 
     <a href="#"><img src="http://lorempixel.com/409/490/technics" class="img-responsive"></a> 
 
     <a href="#"><img src="http://lorempixel.com/409/490/technics" class="img-responsive"></a> 
 
    </div> 
 
    
 
    <div class="col-sm-3"> 
 
     <a href="#"><img src="http://lorempixel.com/324/327/technics" class="img-responsive"></a> 
 
     <a href="#"><img src="http://lorempixel.com/324/327/technics" class="img-responsive"></a> 
 
     <a href="#"><img src="http://lorempixel.com/324/327/technics" class="img-responsive"></a> 
 
    </div> 
 
    </div> 
 
    
 
</div>

Hier die Bootply ist: http://www.bootply.com/mb2Ez6G7r8

Quelle

2016-01-21 Paul

Haben Sie versucht, 'a {display: flex; } '? –

Sie möchten also, dass sie immer die gleiche Höhe wie die ** erste Spalte ** haben, auch wenn die erste Spalte kleiner oder größer als die anderen ist? – xpy

xpy: Korrigieren. Obwohl in dieser Situation die erste Spalte immer größer/größer sein wird. – Paul

Hallo Paul können Sie auf diese Weise lösen, ich sehe, dass Sie verwenden Bootstrap Sie die Eigenschaft flex in Ihrem CSS nicht brauchen.

<div class="row"> 
<div class="col-sm-5"> 
    <a href="#"><img src="https://www.jssor.com/demos/img/paint/01.jpg"></a> 
</div> 

<div class="col-sm-4"> 
    <a href="#"><img src="https://www.jssor.com/demos/img/paint/02.jpg"></a> 
    <a href="#"><img src="http://lorempixel.com/409/490/technics" class="img-responsive"></a> 
</div> 

<div class="col-sm-3"> 
    <a href="#"><img src="https://www.jssor.com/demos/img/paint/06.jpg" class="img-responsive"></a>

und Ihre css

.gallery { 
min-height: 980px !important;}

vergessen Sie nicht hinzufügen bootrap in Ihrem HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

i erklären, warum Sie flex nicht brauchen, Bootstrap Ihre thml mit Klasse ansprechbar machen .row und Sie können dies mit 12 Spalten füllen, deshalb haben Sie col-sm- (Number) in Ihrem Fall 5 + 4 + 3 = 12, wenn Sie möchten, können Sie mehr in diesem Linklesen

Quelle

2016-03-07 13:22:56

.column-sm-4{ 
    display: flex; 
    flex-direction: row; 
}

Wenn Höhe ist ein Problem, das Sie wahrscheinlich background-image mit CSS statt <img> Element verwendet werden soll. Hoffe, dies wird das Problem lösen.

Quelle

2017-07-29 11:47:13 user1744669

Bootstrap-Spalten mit gestapelten Bildern: müssen die gleiche Spaltenhöhe haben

Antwort

Verwandte Themen