Как получить Bootstrap .span1 и .span3 для выравнивания по горизонтали вверху на мобильных размерах

Question

Я использую фреймворк Bootstrap, и я пытаюсь получить .span1 и .span3 div для выравнивания по горизонтали вверху по мобильным размерам. Когда окно браузера попадает в точку останова (782px), верхнее выравнивание изображения и текста вправо исчезает, и текст становится горизонтально по центру и начинает обтекать изображение.

Я новичок в Stackoverflow и с трудом определяю, сколько кода предоставить. Поэтому любая обратная связь о том, как я формирую свой вопрос, будет полезна. :)

Вы можете увидеть эту проблему на http://theplaybook.co в разделе отзывов.

.span1 содержит изображение и .span3 содержит текст. Вот HTML:

<div class="testimonials"> 
<div class="row-fluid"> 
<div class="span1"><img src="/img/tyler.jpg"></div> 
<div class="span3"> 
<p>Just did a beta test of Playbook. I am super impressed."</p> 
<p>—Tyler Tervooren</p> 
</div> 
</div> 
</div> 

и CSS:

.testimonials img { 
float: left; 
} 

Answer 1

Использование Смещения. Документация здесь показывает вам, как:

http://twitter.github.io/bootstrap/scaffolding.html#gridSystem

пролеты плавали элементы, так что если вы не хотите использовать смещение, то вы можете использовать интервал для размера, но затем переопределить это атрибут поплавка, чтобы не плавать, и дать ему «margin-right» и «margin-left» of «auto» в div, чтобы центрировать его.

Answer 2

Бутстрапные комплекты float: none для всех участков сетки на экранах меньших, чем 767px. Вы можете переписать правила Bootstrap за все span* элементов или только для определенных элементов, добавляя этот код после того, как CSS Bootstrap в:

@media (max-width: 767px) { 
    .testimonials .row-fluid .controls-row [class*="span"] { 
     float: left !important; 
    } 
}