在响应式设计中使用网格系统的难度

时间:2018-05-23 12:24:39

标签: gridview responsive-design

我正在使用响应式页面使用gridview。 我有一行包含3列:

res = [i for i in a if i < 5]

每列包含一行,该行本身由两列组成:一列用于图像,另一列用于标题和列。文本。每行内的列数加起来为12个。但是,标题&amp;内容显示在图像下方,而不是旁边。 你能弄明白这个问题吗?

2 个答案:

答案 0 :(得分:1)

您可以首先检查col-3或col-9中没有填充,边距或硬编码宽度的元素,这些元素会强制这些列中的任何一列比预期更宽。

如果是这种情况,则没有足够的空间让两列并排显示,最终结果是col-9会在col-3下降。

如果这无法帮助您确定问题,作为快速测试,请将col-9更改为col-6并查看会发生什么。如果仍然没有快乐,发布一个链接到页面,或启动一个带有html和css的codepen来说明问题。

祝你好运!

答案 1 :(得分:0)

我意识到我错过了以下的CSS

.row::after {
  content: "";
  clear: both;
  display: block;
  }

这就是为什么row表现得很奇怪!