为什么此移动设备菜单没有正确对齐？

Question

在平板电脑/手机上观看时，我一直在努力使这个移动菜单对齐，以便它（和购物车按钮）与徽标（以及右侧）处于同一水平。 / p>

无法让它发挥作用......菜单也无法在移动设备（iOS）上运行。

在计算机上，三个元素之间的对齐方式不正确，这让我觉得这可能与错误排列的菜单的移动版本有关。

你对我可能做错了什么有任何想法吗？

网站本身为here。

非常感谢您的建议！

Answer 1

您正在使用col-sm类，使用col-xs进行移动（超小）。

Answer 2

您使用的是Bootstrap网格。 在＆＃34; mobile＆＃34; -breakpoint下，您没有定义任何列。 具有类.col-sm-*的Div为100％并停止浮动。 因此，要么将这些更改为.col-xs-*，要么添加一些样式以在sm断点上浮动屏幕上的元素。 我更喜欢第二种方法。 此外，我会尝试将购物车和菜单图标放入相同的col。

Answer 3

您应该将此代码放在.css文件中

.thumbnail>img, .thumbnail a>img {
    float: left;
}

它会使徽标左对齐，菜单+购物车排成一行......