Загрузочная сетка с чем-то вроде colspan

Как создать этот макет с помощью Bootstrap Twitter...

enter image description here

Так что он складывается так...

enter image description here

Я мог бы сделать макет в виде таблицы (в настоящее время это карта изображения, но это было быстрое и грязное краткосрочное решение), но, как я понимаю, загрузочный файл, таблица не будет знать, как складывать ячейки. Я видел несколько демонстраций Bootstrap, которые дают функциональность "rowspan", но в этом случае мне нужна функция "colspan". Может ли Bootstrap сделать это?

Ответы

Ответ 1

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

<div class="container">
    <div class="row">
        <div class="col-xs-2">
            3
        </div>
        <div class="col-xs-10">
            <div class="row">
                <div class="col-sm-12">
                    Research complete
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div>Protocol and data</div>
                    <div>
                        <ul>
                            <li>...</li>
                            <li>...</li>
                            <li>...</li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div>Study specific</div>
                    <div>
                        <ul>
                            <li>...</li>
                            <li>...</li>
                            <li>...</li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div>Ethics/governance and regulatory</div>
                    <div>
                        <ul>
                            <li>...</li>
                            <li>...</li>
                            <li>...</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JSFiddle