Bootstrap-raster mit so etwas wie "colspan"

Wie erstelle ich das layout mit Twitter Bootstrap...

Bootstrap-raster mit so etwas wie

So, dass es-stacks wie diese ...

Bootstrap-raster mit so etwas wie

Konnte ich das layout als Tabelle (derzeit ist es eine image-map, aber das war eine quick-and-dirty Kurzfristige Lösung), aber so wie ich das verstehe bootstrap, die Tabelle würde nicht wissen, wie Sie stapeln der Zellen. Ich habe gesehen, eine Reihe von Bootstrap-demos geben "rowspan", wie die Funktionalität, aber in diesem Fall brauche ich eine "colspan" like-Funktion. Kann Bootstrap machen?

InformationsquelleAutor nedlud | 2014-05-05

  1. 15

    Angenommen, Sie wollen die Verwendung von Bootstrap 3.1.1 so etwas wie dies funktionieren sollte. Müssen Sie möglicherweise einige Optimierungen, aber es sollte Ihr problem lösen. Im Grunde stellen Sie Ihre subheaders und Ihre content-Blöcke, die zusammen in einer Spalte jeweils so, dass der stick zusammen auf kleineren Bildschirmen.

    <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

    InformationsquelleAutor Syjin

Schreibe einen Kommentar