Alignment-Problem mit Bootstrap 3

Question

Ich habe ein 2-Zeilen-Layout mit 1 Spalte in der ersten Zeile und drei Spalten in der zweiten Zeile. Der Text wird an einem in der einer Spalte nach links, und die drei Spalten in der zweiten Reihe sind alle Mitten wie so ausgerichtet:

Was ich tun möchte, ist, den Text in dem einem Spalte irgendwie auszurichten die linke Kante des ersten Elements im 3-Spalten-Layout, aber ich bin mir nicht sicher, ob das möglich ist? (zumindest nicht ohne js). Gibt es eine einfache Möglichkeit, dies mit den Bootstrap-Klassen zu tun?

Answer 1

Sie können den oberen Text in den gleichen Container wie "Zentriert 1" einfügen und dann mit position: absolute nach oben verschieben. Siehe Geige: https://jsfiddle.net/avgh4x67/.

HTML:

<div id='above'></div> 
<div class='container'> 
<div class='row'> 
    <div class='col-sm-4'> 
    <div> 
     Centered 1 
     <div id='centered-1-aligned'>aligned</div> 
    </div> 
    </div> 
    <div class='col-sm-4'> 
    <div>Centered 2</div> 
    </div> 
    <div class='col-sm-4'> 
    <div>Centered 3</div> 
    </div> 
</div> 
</div> 

CSS:

#above {height: 80px; border: solid 3px red; margin-bottom: 10px;} 
.col-sm-4 {text-align:center; border: solid 3px red; } 
.col-sm-4 > div {display:inline-block;} 
#centered-1-aligned {text-align: left; position: absolute; top: -80px;}