Twitter bootstrap 3 x 3 行和列答案

【问题标题】：Twitter bootstrap 3 x 3 row and columnTwitter bootstrap 3 x 3 行和列
【发布时间】：2013-09-10 09:32:05
【问题描述】：

这是我的标记。

<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 行和列？

【问题讨论】：

标签： css twitter-bootstrap twitter grid

【解决方案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>

【讨论】：

【解决方案2】：

请检查一下，我认为它应该是 row-fluid 而不是 row-fluid，第二件事是您必须使用单独的行并将跨度放在其中..

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

【讨论】：

【解决方案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）

【讨论】：