私の伝説を一致させる

Question

これを整列させる方法やこれを作る方法を知りたいだけですか？私はちょうど最初の行に4色にする必要がありますし、残りは従います。

click to view the image

私のコード。

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-12 text-center"></div> 
     <div id="calendar" class="col-centered"> 
      <h3>Legends</h3> 
      <div class="box-pink"> 
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Kiamba 
      </div><br/> 
      <div class="box-ygreen"> 
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Alabel 
      </div><br/> 
      <div class="box-sblue"> 
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Maitum 
      </div><br/> 
      <div class="box-dgreen"> 
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Malungon 
      </div><br/> 
      <div class="box-orange"> 
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Glan 
      </div><br/> 
      <div class="box-rblue"> 
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;South&nbsp;Cotabato 
      </div><br/> 
      <div class="box-yellow"> 
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Gensan 
      </div> 
    </div> 
    </div> 

Answer 1

私は本当にあなたの質問を得ていませんでしたが、これはあなたが必要とするものですか？それぞれに4列の行がいくつかありますか？フィドルを見て、それがあなたが必要とするものかどうかを見てください。あなたは、あなたが合っていると思われる場所であれば、テキストの位置を変更するだけです。

Possible Solution

<div class ="container"> 
    <div class = "row"> 
    <h2>Legends</h2> 
    <div class ="col-md-3 col-xs-3 col-lg-3"> 
    <img src ="http://tryingtobegood.com/wp-content/uploads/2011/05/straight-line-example-150x150@2x.png" id="test-img"> 
    <p >Kiamba</p> 
    </div> 
    <div class ="col-md-3 col-xs-3 col-lg-3"> 
    <img src ="http://tryingtobegood.com/wp-content/uploads/2011/05/straight-line-example-150x150@2x.png" id="test-img"> 
    <p>Alabel</p> 
    </div> 
    <div class ="col-md-3 col-xs-3 col-lg-3"> 
    <img src ="http://tryingtobegood.com/wp-content/uploads/2011/05/straight-line-example-150x150@2x.png" id="test-img"> 
    <p>Maitum</p> 
    </div> 
    <div class ="col-md-3 col-xs-3 col-lg-3"> 
    <img src ="http://tryingtobegood.com/wp-content/uploads/2011/05/straight-line-example-150x150@2x.png" id="test-img"> 
    <p>Lungon</p> 
    </div> 
    <div class ="col-md-3 col-xs-3 col-lg-3"> 
    <img src ="http://tryingtobegood.com/wp-content/uploads/2011/05/straight-line-example-150x150@2x.png" id="test-img"> 
    <p>Glan</p> 
    </div> 
    <div class ="col-md-3 col-xs-3 col-lg-3"> 
    <img src ="http://tryingtobegood.com/wp-content/uploads/2011/05/straight-line-example-150x150@2x.png" id="test-img"> 
    <p>South Catabato</p> 
    </div> 
    <div class ="col-md-3 col-xs-3 col-lg-3"> 
    <img src ="http://tryingtobegood.com/wp-content/uploads/2011/05/straight-line-example-150x150@2x.png" id="test-img"> 
    <p>Gensan</p> 
    </div> 
    <div class ="col-md-3 col-xs-3 col-lg-3"> 
    <img src ="http://tryingtobegood.com/wp-content/uploads/2011/05/straight-line-example-150x150@2x.png" id="test-img"> 
    <p>Legend8</p> 
    </div> 
    </div> 
</div>