流体布局(Twitter Bootstrap) [英] Fluid Layout (Twitter Bootstrap)

问题描述

我正在创建一个我想要响应的网站.我正在使用 Twitter 引导程序来帮助解决这个问题.我已经设法使大部分工作正常运行，但站点内的一些元素没有发挥作用.现在也许我只是错过了显而易见的事情，但如果有人能指出我哪里出错了，我会很感激的，这样 1) 我可以纠正问题，2) 从我的错误中吸取教训.

I am in the process of creating a site that i would like to be responsive. I am using Twitter bootstrap to assist with this. I have managed to get the majority of it working but a few elements within the site are not playing ball. Now maybe im just missing the obvious but would appreciate it if someone could point out where I have gone wrong so that 1) i can correct the issues and 2) learn from my mistakes.

该站点位于 http://growing-mist-5023.herokuapp.com/ 我试图修复的部分是滑块下方页面中心的宝丽来照片.欢迎所有建设性的批评，因为我正在努力学习(尽管是我的错误)，欢迎提出任何建议

The site is at http://growing-mist-5023.herokuapp.com/ and the part im trying to fix is the polaroids across the center of the page under the slider. All constructive criticism welcomed as I am trying to learn ( albeit from my mistakes) and any suggestions welcome

谢谢

推荐答案

您可以将 <div class="row"> 替换为 <div class="row-fluid"> 在 .polaroid 的第二级父级

you can replace <div class="row"> with <div class="row-fluid"> in the 2nd level parent of your .polaroid

我不认为你可以在 768px 下保持相同的布局(下图为 480px)

I don't think you can keep the same layout under 768px (picture below with 480px)

我建议您在 .span3 顶部使用另一个类，并使用媒体查询覆盖 768 下 .span3 的行为以创建居中的 2x2.

I would recommend you to use another class on the top of the .span3 and use media queries to overide the behaviour of the .span3 under 768 to create a centered 2x2.

这篇关于流体布局(Twitter Bootstrap)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！