1

我正在使用 twitter bootstrap，我想创建一个网格，该网格将根据屏幕的宽度缩小并将其单元格向下移动。现在我设法创建了一个这样的网格：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 文件。从那里工作。流动性和响应性不是一回事，尽管它们是相关的并且经常一起使用。流体布局在调整大小时会调整其宽度，这似乎不是您想要的。响应式布局通常会在调整大小时调整其布局。

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

您可能仍然想稍微弄乱布局，但功能就在那里。

于 2012-11-07T11:16:53.397 回答