行と列の操作boostrap

Question

このテキストボックスにはテキストと多分いくつかのimg brackgroundが入っていますが、小さなスクリーン上に表示されるようにボックスは配置されません。

私はいくつかのことを試してみましたが、テキストはアライメント

CSS破壊することなく、ボタンの上に整列しています：

.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

これで鍵は、親のdivにdisplay:flexです。これにより、2人の子供divは同じ高さになります。

2番目のdivからパディングを削除して大きなボックスの近くに移動した後、position:absolute d divの下部に大きなボックスのタイトルが表示されます。

私はスタイリングに役立つパッディングも少し演奏しましたが、上のイメージのように見えるようにスタイルされていません。

.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

をあなたが行く。テキストは絶対配置されたdivになければなりません。

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; 
}