Meine Legenden ausrichten

Question

Ich möchte nur wissen, wie man das anpasst oder eine Spalte daraus macht? Ich will nur in der ersten Reihe 4 Farben haben und der Rest wird folgen.

click to view the image

Mein Code.

<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

Ich habe Ihre Frage nicht wirklich bekommen, aber ist das was Sie brauchen? Mehrere Zeilen mit jeweils 4 Spalten? Sieh dir die Geige an und schau, ob es das ist, was du brauchst. Sie müssen nur die Position des Textes ändern, wo immer Sie passen.

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>