Question

我只是想知道如何对齐这个或列出一个？我只想要在第一行必须是4种颜色，其余的将跟随。

我的代码。

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

调整我的传说

1 个答案: