span4 класс не работает с twitter bootstrap

Question

Я новичок в web dev, и сейчас я работаю с Twitter Bootstrap. Я пытаюсь создать 3 колонки на моей странице, используя этот код:

<div class="container"> 
    <div class="row"> 
      <div class="span4"> 
       <h4 class="muted text-center">About me</h4> 
       <p>Sample Text1.</p> 
       <a href="#" class="btn"><i class="icon-user"></i> Text1</a> 
      </div> 
      <div class="span4"> 
       <h4 class="muted text-center">About you</h4> 
       <p>Sample Text2</p> 
       <a href="#" class="btn btn-success"><i class="icon-star icon-white"></i> Text2</a> 
      </div> 
      <div class="span4"> 
       <h4 class="muted text-center">About Us</h4> 
       <p>Sample Text3</p> 
       <a href="#" class="btn btn-info">Text3</a> 
      </div> 
     </div> 
</div> 

Я посмотрел на многочисленных примерах и протестировали его на моей странице, но они, кажется, не работают. Этот код выводит весь текст один над другим и не делит его на столбцы в той же строке.

Нужно ли каким-либо образом изменить файл bootstrap.css? По умолчанию он не содержит класс span4 или что-то еще.

Answer 1

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

На начальной загрузки 3.0 ... spanX были амортизируется, вместо этого, col-xx-## используется в настоящее время, где xx может быть lg, md, sm или xs и # находится в диапазоне от 1 до 12

так в выше HTML-разметки твоего изменить <div class="span4"> к <div class="col-xs-6 col-md-4"> и он должен работать

посмотреть демо here см docs here on how to use it

Кроме того, если вы используете ver 2.xx bs ..., я предлагаю вам перейти к последнему 3.0, на котором основано это решение!

Answer 2

Я думаю, что вы используете Bootstrap 3 с классами Bootstrap 2. Имена классов сетки были изменены в последней версии, см. documentation.