twitter bootstrap grid-Bilder

Ich bin mit twitter bootstrap und ich möchte, ein raster zu erstellen, die kleiner wird, entsprechend der Breite des Bildschirms, und bewegen Sie die Zellen nach unten. Jetzt habe ich es geschafft, ein raster zu erstellen, wie diese: http://jsfiddle.net/D2RLR/3179/.

Das problem ist, dass das Gitter nicht ausgerichtet sehr gut und wenn ich Sie verkleinern das Fenster, die Bilder werden immer kleiner, anstatt sich in die nächste Zeile.

Ist es gut kennt der Praxis zu tun?

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div id="search" class="well form-search search">
                <input id="search-term" type="text" placeholder="Type search term">
                <button id="search-button" class="btn btn-primary">Search</button>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row-fluid">
        <div id="grid" class="span9">
            <div class="span3">
                <img class="img-polaroid" src="http://lh5.googleusercontent.com/public/zSxr-JuTje4AqFmN8zOFNcRaRm7L_QxmCaqzYSdnzHfKSHCIeM9G5NHKsdNy8BwnMLwhYHI4h_G6gNXA3c_3Zc8ggsXtPeG-fhk_IALFoH0b1HPrdxsBIszYLsUye_lvyffBsdxn_hfF9Ktng7BAgWjT56mDYBqpZXX25BC-odQ2mn8O" alt=""/>
            </div>
            <div class="span3">
                <img class="img-polaroid" src="http://lh3.googleusercontent.com/public/tN2kf46FC7y_IEd2vzJz9v4PhVsMFjV4scZovvLYRVTMk8OdYRBBlM1l263Nuak7rQVQHT107NfwWsZQ-9_MFoiOXKozErla4banQF51QyT5igHT-QKo6cRmUiTvVbQVkjgRYIh8sPutpY-XTrG8nEludMnt6GTuOg" alt=""/>
            </div>
            <div class="span3">
                <img class="img-polaroid" src="http://lh6.googleusercontent.com/public/AF-Zvxnq21ZQFZNwC4_XQnwN9-sudTFlohx7d7llv11R_60jpmPNhW679uLMzcShWd73vNAHhuTYZHFJF3rsCh7EVczcRnm-cd6KcrLDJEWWceyBUePnOPDerPf_5sovWzACyipV4JMf4k9-HomEbOwYIrwa0SwoBDXc1mwhSxVWreCs8DLNpeMRx-o" alt=""/>
            </div>
            <div class="span3">
                <img class="img-polaroid" src="http://lh3.googleusercontent.com/public/IYgOn9vXVD4zHB1d67KpX9--z0NDR0URCxEPTA32KFWTSDn9l2f7XR3tt0TTRAekThgUOCH0f0dGJn5ZLh3dUAXh1IDDrlbFJNmxGeVZt_eTTIG4YB23pXSfDH1Cx5OhNoEiaCCz4QAr-e8c" alt=""/>
            </div>
            <div class="span3">
                <img class="img-polaroid" src="http://lh3.googleusercontent.com/public/QDiY5hfLbDwEbvJmAgrcX4vRURGFEMBO6V66-EW_4YJGW5xJNCSLwwCltUB0YT1f0QMkUeztQZaI07KcsnxqEaaByAIq-ihvwPxg4B6wJuhEDjBIh1Bu5Txz0NBijb9y1dRdnSbtPImzk2HoSAcHUqfphDJwE1gfmErGtT0Apw" alt=""/>
            </div>

            <div class="span3">
                <img class="img-polaroid" src="http://lh6.googleusercontent.com/public/jIGAV-2KIt3YoKQ7zDtJN44qj6puwAk5J_GVCJCRnTTOB_idlMB-cyI9d0KTy-FL965GcOJbBeH1C8ros9FMhGxQW6ZToyr-qOYYx18FomndcKpC8TxsJAMpaz9IsT48WGfe_OgsKf9heJoEGhHGTw" alt=""/>
            </div>
        </div>
        <div id="term-history" class="span3">
            <h2>Search history:</h2>
            <ul>
                <li>
                    <a href="javascript:void(0);">camera</a>
                </li>
            </ul>
        </div>
    </div>
</div>

InformationsquelleAutor Naor | 2012-11-07

  1. 3

    Ändern Sie die container-fluid und row-fluid Klassen container und row. Dann gehören die bootstrap-responsive.css-Datei. Von dort aus arbeiten. Fluid-und responsive ist nicht das gleiche, obwohl Sie verwandt sind und oft zusammen verwendet. Fluide layouts passen Sie Ihre breiten, wenn in der Größe verändert, was zu sein scheint, nicht das, was Sie wollen. Responsive layouts, die in der Regel passen Ihre layout, wenn in der Größe verändert.

    http://jsfiddle.net/tylergreen/9v296/

    Werden Sie wahrscheinlich immer noch wollen, um Durcheinander mit dem layout ein bisschen, aber die Funktionalität ist da.

    Warum aber gibt es die Zeile enthält nur 2 Bilder? in Fall gibt es einen Raum, warum nicht fügen Sie ein weiteres Bild auf die Reihe?
    Setzen Sie Ihre span3 divs, die die Bilder enthält, die in Reihen von drei? jsfiddle.net/tylergreen/9v296/1 - Für die Klärung, Lesen Sie die 'Schachteln Spalten' - Abschnitt hier: twitter.github.com/bootstrap/scaffolding.html#gridSystem
    Sie hat nicht mich verstehen. In deinem ersten Beispiel, dass Sie nicht wickeln Sie jeweils zwei Bilder mit <div class="row"> aber noch immer, der browser zeigte in jeder Zeile nur zwei Bilder, auch wenn ich erweitern die Breite. Warum ist das so? Ich bin auf der Suche nach einer Lösung, der die Bilder der Reihe nach auf die Breite der Zeile.
    Dann, wenn Sie keine Präferenz, wie viele Bilder darstellen sollten einer Reihe, nehmen Sie nur die Verpackung divs zusammen. Sie sind völlig unnötig. jsfiddle.net/tylergreen/9v296/2
    Dann tun Sie etwas wie dieses: jsfiddle.net/9v296/3 - Auch ich würde definitiv empfehlen, setzen einige Mühe in das Studium bis auf CSS und HTML, und mache ein paar Experimente mit Ihrem code. Dies ist nicht besonders fortgeschrittenen Zeug.

    InformationsquelleAutor Glynne McReynolds

Schreibe einen Kommentar