Align div am unteren Rand des Bootstrap col

Wie kann ich div Element am unteren Rand des Elternelements ausrichten, während Bootstrap col verwenden?Align div am unteren Rand des Bootstrap col

.wrapper { 
 
    background-color: green; 
 
    height: 200px; 
 
} 
 

 
.bottom { 
 
    position: relative; 
 
} 
 

 
.bottom-div { 
 
    height: 200px; 
 
    position: absolute; 
 
    bottom: 0; 
 
}

<div class="wrapper"> 
 
    <div class="col-md-3 bottom"> 
 
    <div class="bottom-div"> TEST1 </div> 
 
    </div> 
 
    <div class="col-md-6"> 
 
    TEST2 
 
    </div> 
 
    <div class="col-md-3"> 
 
    TEST3 
 
    </div> 
 
</div>

unteren div Element auszurichten nicht unten. Was ist der richtige Weg? Vielen Dank.

UPDATE: Div Element läuft aus Wrapper (es ist im Grunde bewegt sich nach oben)

Quelle

2017-05-12 CiepCiep

Sie sollten die Spalte relativ machen, wenn Sie, dass der Bezugspunkt für die absolute Positionierung sein wollen. Der modernere Ansatz wäre die Verwendung von Flexbox. – CBroe

@CBroe Ich aktualisierte basierend auf Ihrem Vorschlag. Immer noch verwirrt. – CiepCiep

Erstellen Sie bitte ein [mcve]. – CBroe

Nicht sicher genau das, was Sie zu tun versuchen, wie @CBroe sagte Flexbox der beste Weg sein würde, aber versuchen, diese: -

/* CSS used here will be applied after bootstrap.css */ 
 
.wrapper{ 
 
    background-color:green; 
 
    height: 200px; 
 
    position: relative; 
 
    
 
} 
 
    
 
.bottom-div{ 
 
    height: 50px; 
 
    width: 50px; 
 
    position: absolute; 
 
    bottom:0; 
 
    left: 0; 
 
    background-color: red; 
 
} 
 

 
.testclass { 
 
    height: 100%; 
 
}

<div class="wrapper"> 
 
    <div class="col-md-3 testclass"> 
 
    <div class="bottom-div"> TEST1 </div> 
 
    </div> 
 
    <div class="col-md-6"> 
 
    TEST2 
 
    </div> 
 
    <div class="col-md-3"> 
 
    TEST3 
 
    </div> 
 
</div>

Quelle

2017-05-12 11:10:00

Align div am unteren Rand des Bootstrap col

Antwort

Verwandte Themen