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

我对其中一些答案感到惊讶。这是一个最新引导版本的简化版本。有关sizes of grid columns的更多详细信息，请查看此处。

  <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

请检查这个，我认为它应该是行液而不是行液，第二件事是你必须使用单独的行并将你的跨度放在它们里面。

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

Answer 3

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

如果您希望well包围整个3x3网格，请将容器包装在井中(参见bootply中的#2：http://bootply.com/79364)。