Arbeiten mit Zeilen und Spalten boostrap

Question

Also, ich versuche, diese Boxen, die einige Text und vielleicht einige img Brackground halten, aber die Boxen werden nicht ausgerichtet, wie sie auf einem kleinen Bildschirm sollten.

habe ich versucht, ein paar Dinge, aber der Text auf dem Botton nicht ausrichten, ohne die Ausrichtung

CSS zu zerstören:

.bigbox { 
text-align: center; 
    padding: 80px 40px; 
} 
.bigbox .bigbox-title { 

    text-align: left; 
    font-size: 28px; 
    color: #fff; 
} 

.bigbox .bigbox-text { 
    text-align: left; 
    font-size: 18px; 
    color: #fff; 
    opacity: .85; 
    margin-bottom: 20px; 
} 
.smallbox { 
text-align: center; 
    padding: 80px 40px; 
} 
.smallbox.smallbox-title { 

    text-align: left; 
    font-size: 28px; 
    color: #fff; 
} 
.smallbox.smallbox-text { 
    text-align: left; 
    font-size: 18px; 
    color: #fff; 
    opacity: .85; 
    margin-bottom: 20px; 
} 

HTML

<div class="full-width-container"> 
     <div class="row no-space-row "> 
      <div class="col-sm-6 bg-color-base"> 
       <div class="bigbox "> 
        <h2 class="bigbox-title">BOX 1</h2> 
        <p class="bigbox-text">DESCRIPTION</p> 
       </div> 
      </div> 
      <div class="col-sm-6"> 
       <div class="smallbox bg-color-purple "> 
        <h2 class="smallbox-title">BOX 1</h2> 
        <p class="smallbox-text">DESCRIPTION</p> 
       </div> 
       <div class="smallbox bg-color-purple-dark "> 
        <h2 class="smallbox-title">BOX 1</h2> 
        <p class="smallbox-text">DESCRIPTION</p> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

Der Schlüssel dabei ist display:flex auf dem übergeordneten div. Dadurch werden die beiden untergeordneten Elemente div auf die gleiche Höhe gesetzt.

Ich habe die Polsterung aus dem zweiten div entfernt, um es näher an die große Box zu bewegen, dann position:absolute d die große Box Titel auf der Unterseite der div.

Ich habe auch mit dem Padding ein wenig gespielt, um beim Styling zu helfen - aber ich habe es nicht so gestylt, dass es genau wie das Bild oben aussieht.

.row { 
 
    display:flex; 
 
} 
 
.bg-color-base { 
 
    background:red; 
 
} 
 
.bg-color-base + div{ 
 
    padding:0; 
 
} 
 
.bg-color-purple { 
 
    background:purple; 
 
} 
 
.bg-color-purple-dark { 
 
    background:blue; 
 
} 
 
.bigbox { 
 
text-align: center; 
 
    padding: 40px; 
 
    position:absolute; 
 
    bottom:0; 
 
} 
 
.bigbox .bigbox-title { 
 

 
    align-self: flex-end; 
 
    text-align: left; 
 
    font-size: 28px; 
 
    color: #fff; 
 
} 
 

 
.bigbox .bigbox-text { 
 
    text-align: left; 
 
    font-size: 18px; 
 
    color: #fff; 
 
    opacity: .85; 
 
    margin-bottom: 20px; 
 
} 
 
.smallbox { 
 
text-align: center; 
 
    padding: 160px 40px 10px; 
 
} 
 
.smallbox.smallbox-title { 
 

 
    text-align: left; 
 
    font-size: 28px; 
 
    color: #fff; 
 
} 
 
.smallbox.smallbox-text { 
 
    text-align: left; 
 
    font-size: 18px; 
 
    color: #fff; 
 
    opacity: .85; 
 
    margin-bottom: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="full-width-container"> 
 
     <div class="row no-space-row "> 
 
      <div class="col-xs-6 bg-color-base"> 
 
       <div class="bigbox "> 
 
        <h2 class="bigbox-title">BOX 1</h2> 
 
        <p class="bigbox-text">DESCRIPTION</p> 
 
       </div> 
 
      </div> 
 
      <div class="col-xs-6"> 
 
       <div class="smallbox bg-color-purple "> 
 
        <h2 class="smallbox-title">BOX 2</h2> 
 
        <p class="smallbox-text">DESCRIPTION</p> 
 
       </div> 
 
       <div class="smallbox bg-color-purple-dark "> 
 
        <h2 class="smallbox-title">BOX 3</h2> 
 
        <p class="smallbox-text">DESCRIPTION</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 2

Hier du gehst. Der Text muss in einem absolut positionierten div sein.

http://codepen.io/ruchiccio/pen/Kzbeqa

.bcenter { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin-right: auto; 
    margin-left: auto; 
    width: 100%; 
    text-align:center; 
}