twitter-bootstrap 推特引导图像网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13268342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
twitter bootstrap images grid
提问by Naor
I am using twitter bootstrap and I would like to create a grid that will shrink according to the width of the screen and move it cells down. Right now I managed to create a grid like this: http://jsfiddle.net/D2RLR/3179/.
我正在使用 twitter bootstrap，我想创建一个网格，该网格将根据屏幕的宽度缩小并将其单元格向下移动。现在我设法创建了一个这样的网格：http: //jsfiddle.net/D2RLR/3179/。
The problem is that the grid is not aligned very well and if I shrink the window the images are getting smaller instead of moving to the next row.
问题是网格没有很好地对齐，如果我缩小窗口，图像会变小而不是移动到下一行。
Is there any well knows practice to do that?
是否有任何众所周知的做法来做到这一点？
<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>
回答by Glynne McReynolds
Change the container-fluidand row-fluidclasses to containerand row. Then include the bootstrap-responsive.css file. Work from there. Fluid and responsive is not the same thing, although they're related and often used together. Fluid layouts adjust their widthswhen resized, which seems to be not what you want. Responsive layouts generally adjust their layoutwhen resized.
将container-fluidandrow-fluid类更改为containerand row。然后包含 bootstrap-responsive.css 文件。从那里开始工作。流畅和响应不是一回事，尽管它们是相关的并且经常一起使用。流体布局在调整大小时会调整其宽度，这似乎不是您想要的。响应式布局通常在调整大小时调整其布局。
http://jsfiddle.net/tylergreen/9v296/
http://jsfiddle.net/tylergreen/9v296/
You will still probably want to mess with the layout a bit, but the functionality is there.
您可能仍然想稍微弄乱布局，但功能就在那里。
