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

我对一些答案感到惊讶。这是带有最新引导程序版本的简化版本。在此处查看有关网格列大小的更多详细信息。

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