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 х 3 строк и столбцов, однако результат, как этот

Как создать 3 х 3 строк и столбцов?

Answer 1

Пожалуйста, проверьте это, я думаю, что она должна быть строка-жидкость, а не грести жидкости, вторая вещь, вы должны использовать раздельные строки и поместите пролеты внутри них ..

Для сетки 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 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

Если вы хотите, чтобы well окружают всю сетку 3х3, завернуть контейнер внутри скважины (см # 2 в bootply: http://bootply.com/79364)

Answer 3

Я удивлен некоторыми из ответов. Вот упрощенная версия с новейшей версией бутстрапа. Для получения более подробной информации о 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>