Система сетки начальной загрузки Twitter - 4 результата span3 в 2 строках

Я использую twitter bootstrap и хочу иметь 4 раздела «как это работает» в одной строке внутри контейнера. Согласно twitter bootstrap, внутри контейнера есть 12 интервалов, так что это не должно быть проблемой.

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

Любые идеи?

CSS ЗДЕСЬ

.howitworks{
        text-align: center;
        margin-top: 30px;
        }

.howitworks p{
        margin-left:20%;
        padding-bottom: 40px;}

.howitworks h3{
        padding-top:25px;
            }

#howitworksdetail{
        border: thin solid #0d9e49;
        border-bottom-width: 3px;
        border-bottom: solid #0d9e49;
        min-height: 220px;
        margin-top: 60px;
            }

HTML ЗДЕСЬ

<div class = "container">
 <div class = "howitworks">
   <div class = 'span3', id= 'howitworksdetail'>
     <h3 class = "text-center">header</h3>
     <p class = "span2 text-center">stuff.</p>
   </div>
   <div class = 'span3', id= 'howitworksdetail'>
     <h3 class = "text-center">header</h3>
     <p class = "span2 text-center">stuff</p>
   </div>
   <div class = 'span3', id= 'howitworksdetail'>
     <h3 class = "text-center">header</h3>
     <p class = "span2 text-center">stuff</p>
   </div>
   <div class = 'span3', id= 'howitworksdetail'>
     <h3 class = "text-center">header</h3>
     <p class = "span2 text-center">stuff</p>
   </div>
 </div>
</div>

Я попытался удалить границу, и это тоже не помогло. Спасибо


css twitter-bootstrap twitter-bootstrap-2
person brad    schedule 20.04.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Похоже, в вашем коде отсутствует <div class="row">. На странице Bootstrap Grid System вы заметите, что для нее требуется класс row в чтобы создать строку с этими 12 столбцами.

Кроме того, у вас есть класс span2 для ваших <p> элементов, но я считаю, что вы хотите применить классы сетки только к <div> элементам. Надеюсь это поможет!

person jennz0r    schedule 20.04.2014
comment
спасибо - это сработало, и я полностью пропустил это. есть ли способ добавить границы к этим div, не переходя на следующую строку? - person brad; 20.04.2014
comment
нашел ответ на этот вопрос здесь: stackoverflow.com/questions/12922858/ - person brad; 20.04.2014