html - 使用 CSS 和 HTML 的响应式网格

Question

我已经解决这个问题好几个小时了。

我希望让我的网站响应迅速，我已经开始使用移动设备，并正在努力为桌面设备创建它。

我的问题:

当我为平板电脑或台式机编辑 .col 时，列会响应，但它们不会在同一行。

当桌面断点命中时，我希望我的图片位于菜单的右侧，内容位于图片的右侧。

如果我做我的

#menu{float:left} //under CSS desktop breakpoint

然后我会得到我想要的结果，但菜单会失去它的列宽。

https://jsfiddle.net/Lrtpjhh7/

有什么建议吗？我觉得自己好像走在正确的轨道上，但有些地方不对劲。

Answer 1

为了达到预期的结果，您需要:

1. 将您想要在菜单附近显示的任何内容包装在 col-9 包装器中。
2. 将 float:left 添加到您的 [class^="col-"]。

这是你的 fixed fiddle .