css - Twitter ブートストラップ 3 x 3 行と列

Question

これが私のマークアップです。

<div class = "row fluid"> 
<div class="span4">

             <div class ="well row">

                    <div class = "span3">                   
                    <a> 
                     <img src="img/albumart/2a.jpg" width="80" height="80" /> 
                     <p>Name here</p>
                    </a>
                    </div>


                    <div class = "span3">                   
                    <a> 
                     <img src="img/albumart/2a.jpg" width="80" height="80" /> 
                     <p>Name here</p>
                    </a>
                    </div>

                    <div class = "span3">                   
                    <a> 
                     <img src="img/albumart/2a.jpg" width="80" height="80" /> 
                     <p>Name here</p>
                    </a>
                    </div>

                            <div class = "span3">                   
                    <a> 
                     <img src="img/albumart/2a.jpg" width="80" height="80" /> 
                     <p>Name here</p>
                    </a>
                    </div>


                    <div class = "span3">                   
                    <a> 
                     <img src="img/albumart/2a.jpg" width="80" height="80" /> 
                     <p>Name here</p>
                    </a>
                    </div>

                    <div class = "span3">                   
                    <a> 
                     <img src="img/albumart/2a.jpg" width="80" height="80" /> 
                     <p>Name here</p>
                    </a>
                    </div>

                        <div class = "span3">                   
                    <a> 
                     <img src="img/albumart/2a.jpg" width="80" height="80" /> 
                     <p>Name here</p>
                    </a>
                    </div>

                        <div class = "span3">                   
                    <a> 
                     <img src="img/albumart/2a.jpg" width="80" height="80" /> 
                     <p>Name here</p>
                    </a>
                    </div>
            </div>
    </div>


<div>

私が達成する文字列は3 x 3の行と列ですが、結果は次のようになります

3 x 3 の行と列を作成するにはどうすればよいですか?

Answer 1

私はいくつかの答えに驚いています。これは、最新のブートストラップ バージョンを使用した簡略化されたバージョンです。グリッド列のサイズの詳細については、こちらをご覧ください。

  <div class="container-fluid">
    <div class="row">
     <div class="col-md-4">1</div>
     <div class="col-md-4">2</div>
     <div class="col-md-4">3</div>
    </div>
    <div class="row">
     <div class="col-md-4">1</div>
     <div class="col-md-4">2</div>
     <div class="col-md-4">3</div>
    </div>
    <div class="row">
     <div class="col-md-4">1</div>
     <div class="col-md-4">2</div>
     <div class="col-md-4">3</div>
    </div>
  </div>

Answer 2

rowの代わりに使用し、 は..内row-fluidにあるwell必要があります。span4

<div class="container">
  <div class="row">
     <div class="span4">
        <div class="well">..</div>
     </div>
     <div class="span4">
        <div class="well">..</div>
     </div>
     .....
  </div>
</div>

デモ: http://bootply.com/79364

3x3 グリッド全体を囲う場合はwell、コンテナーをウェル内にラップします (bootply の #2 を参照してください: http://bootply.com/79364 )

Answer 3

これを確認してください。行流体ではなく、行流体である必要があると思います。2 つ目は、別の行を使用し、その中にスパンを配置する必要があることです。

3*3 グリッドの場合、

 <div class="row-fluid">
 <div class="span12">
 <div class="span4">1</div>
 <div class="span4">2</div>
 <div class="span4">3</div>
 </div>
 </div>
 <div class="row-fluid">
 <div class="span12">
 <div class="span4">4</div>
 <div class="span4">5</div>
 <div class="span4">6</div>
 </div>
 </div>
 <div class="row-fluid">
 <div class="span12">
 <div class="span4">7</div>
 <div class="span4">8</div>
 <div class="span4">9</div>
 </div>
 </div>