如何在平板电脑/移动设备上整理这些列？答案

【问题标题】：How do I sort out these columns on tablet/mobile device?如何在平板电脑/移动设备上整理这些列？
【发布时间】：2016-11-10 20:43:38
【问题描述】：

我正在尝试重新设置常见问题解答页面的样式。我需要在移动/平板设备上修复类别后的间距。我尝试使用填充和宽度来修复它，但效果不佳。

.faqs_content .faq_content .faq .media-left {
padding: 0 30px;
}

【问题讨论】：

您的问题之一是您在引导列上设置静态宽度。你把col-sm-3 faq_category然后做了一个样式col-sm-3 faq_category { width: 278px; }。这是反响应的，您的列宽应该以 % 为单位。我建议不要弄乱任何引导程序container、row 或col- 填充、边距或宽度。不要与框架对抗！
我应该在 % 中设置什么宽度？
col-sm-3 的宽度已经在 bootstrap.css 文件中为您设置好了（宽度：25%），所以只需删除 faq_category { width: 278px; }，该列将设置为 25%。跨度>
我确实删除了宽度，在手机/平板电脑中仍然相同。我不明白为什么我在这里没有空格nkv.name/screenshots/2016-11-10_230624.png
jsfiddle.net/baz13y8u/#&togetherjs=G0QdA14xEN

【解决方案1】：

使用填充不是这样做的方法。您应该使用flex-box 进行响应式设计，或者类似float，我建议您阅读这篇文章https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如果您不想使用 flex-box，最简单的方法是使用 bootstrap 构建响应式设计网站。

【讨论】：

【解决方案2】：

如果您想使用百分比来响应，您很可能会想使用百分比。

【讨论】：