Bootstrap cols行为

Question

我们尝试创建UI组件图标列表，它将使用引导列类（col-md - * ...）进行响应。 问题是，当我们尝试在布局2:10的不同列中显示相同的UI组件时。 行为（视图）必须不同...如果此UI组件设置在COL 2内部，那么我们希望垂直看到所有图标（每个按行分隔），但是当组件设置在COL 10内部时，则我们希望在水平视图中看到该图标列表。 可以说UI组件的行为必须依赖于它的父元素，而不是媒体标签。那么我们应该使用哪种解决方案来获得结果呢？

enter link description here

Answer 1

尝试给图标固定宽度与显示内联块（或流量左/右）。

的宽度必须略多于一半COL-2（所以会有对同一行中的2个图标没有空格）

这样，当图标是在狭窄的div（COL -2），每个图标将位于单独的行上 - 即垂直显示;而在宽div（col-10），他们将被放置在一排。