1

私はtwitterのブートストラップを使用しています。画面の幅に応じて縮小し、セルを下に移動するグリッドを作成したいと思います。今、私は次のようなグリッドを作成することができました: http://jsfiddle.net/D2RLR/3179/ .

問題は、グリッドがうまく整列していないことです。ウィンドウを縮小すると、次の行に移動する代わりに画像が小さくなります。

それを行うためのよく知られた練習はありますか？

<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>
4

1 に答える 1

3

container-fluidおよびrow-fluidクラスをcontainerおよびに変更しrowます。次に、bootstrap-responsive.css ファイルを含めます。そこから作業。Fluid と Responsive は同じものではありませんが、関連しており、しばしば一緒に使用されます。可変レイアウトは、サイズ変更時に幅を調整しますが、これは望ましくないようです。レスポンシブ レイアウトは通常、サイズ変更時にレイアウトを調整します。

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

おそらくレイアウトを少しいじりたいと思うでしょうが、機能はそこにあります。

于 2012-11-07T11:16:53.397 に答える