начальная загрузка: четыре эскиза span3 в отзывчивом span12 - PullRequest
Новая
       6

начальная загрузка: четыре эскиза span3 в отзывчивом span12

0 голосов
/ 21 февраля 2012

Мы сложили span12 - в span8 -контейнер и попытались поместить четыре эскиза в ряд. К сожалению, последние <li> переносятся на следующую строку, хотя размеры экрана позволяют разместить все четыре миниатюры в строке.

То же поведение с другими комбинациями, такими как 6x span2 ...

Я строю небольшую скрипку, показывающую это поведение: http://jsfiddle.net/PnWjT/

Есть предложения как это исправить?

1 Ответ

1 голос
/ 22 февраля 2012

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

Возьмем для примера: 

<div class="container">
   <div class="container-fluid"> .. </div>
</div>

Здесь вы пытаетесь сложить div контейнера с жидкостью, .container-fluid, в фиксированный div контейнера .container, и, таким образом, уничтожаете .container-fluid div. Эти два div-элемента содержались для инкапсуляции нужного вам макета, а не для объединения друг друга, поэтому используйте только один.

Еще одна проблема с вашими стеками: 

<div class="span8">
    <div class="row-fluid">
        <div class="span12">
            <div class="row-fluid">
                 ......

Здесь вы размещаете div span12 (ширина 100% в контейнере .row-fluid) в div span8 (ширина 65,812% в .row-fluid), и, таким образом, ваш контент перемещается вправо, потому что ваш span12 div переполняет меньший контейнер span8 div, и он не корректно корректируется для изменения размера из-за этого. Вы должны сложить span div в соответствии с их шириной, например span12/2 = span6, span4*2 = span8, span5 + span5 = span10 и т. Д. *

Вот демоверсия с соответствующим переработанным стеком. Обратите внимание, что боковая панель лежит на span4 div, а содержимое на span8, span4 + span8 = span12, вы не можете подняться выше span12, если не создадите свой собственный класс.

...