具有CSS和HTML的响应式网格

时间:2016-01-03 20:34:59

标签: html css

我已经遇到这个问题好几个小时了。

我希望我的网站能够快速响应,我已经开始使用移动设备了,我正在为桌面创建它。

我的问题:

当我为平板电脑或桌面编辑.col时,列会响应,但它们不会在同一行。

当断点到达桌面时,我希望我的图片位于菜单右侧,内容位于图片右侧。

如果我做了我的

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

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

https://jsfiddle.net/Lrtpjhh7/

任何建议?我觉得好像我走在正确的轨道上,但有些事情没有用。

1 个答案:

答案 0 :(得分:1)

为了达到预期的效果,您需要:

  1. col-9包装器内的菜单附近包装您想要显示的内容。
  2. float:left添加到您的[class^="col-"]
  3. 这是你的fixed fiddle