高度定义为行宽百分比的Bootstrap列

Question

复杂网格布局，帮助！

我正在使用bootstrap 3.0.2创建一个响应式网站，无法弄清楚项目的需求文档中所述的布局。我根据需要制作了我需要的图像，并会提供更多细节或更新我的问题。我对任何有关如何实现这一目标的建议持开放态度。

问题

此图像描述了我需要设计在三种不同宽度下的外观。

我应该添加，每个框基本上都是一个div，里面有图片，文章标题和摘要。

喜欢说......先进的

如果问题愚蠢或答案显而易见，我想表示感谢并提前道歉。我很长一段时间都是一名设计师，但我对响应式设计不熟悉，而且我一直在试图让这个工作起作用。

Answer 1

你的项目中有问题的部分是制作两个较小的块，一个较大的块，并使这两个50％。据我所知，没有成熟的跨浏览器解决方案可以在没有javascript的情况下实现这一目标。

您可能需要查看：Flexbox和IE Flexie同志。

实现相同目标的另一种方法可能是使用viewport dimensions。请注意browsers support。

总而言之，如果你能做到这一点，我建议只使用JS，对css的回退不会破坏网站的外观。刚刚完成了一个类似要求的项目，我只想说好运。