如何设置引导菜单在移动设备上可见的项目

Question

我有一个网站，我的客户需要在移动设备上设置菜单按钮旁边的购物车菜单项，但我不知道最好的方法是什么。你们有没有人有任何提示？我提前感谢。 Bellow是黄色突出显示的项目图像，我想将其设置为可见：

Answer 1

通过添加以下课程，您可以在大屏幕中隐藏它并在移动设备中显示。

col-visible-xs col-visible-sm col-hidden-md col-hidden-lg

在大屏幕上隐藏使用以下课程

col-hidden-md col-hidden-lg

在小屏幕中使用以下课程

col-visible-xs col-visible-sm

Answer 2

仔细查看Bootstrap's Responsive Utilities文档。您可以使用hidden-或visible-类。

要隐藏在桌面上，请将以下类添加到元素中：

hidden-md hidden-lg

隐藏在移动设备上使用：

hidden-xs hidden-sm

这里是jsFiddle demo。

Answer 3

您可以在jquery中搜索某些内容并显示和隐藏块。一种非常简单的方法是在CSS中使用媒体查询。它不是最好的解决方案，但它是最简单的解决方案。

@media screen and (min-width: 768px) { 
.shopping-cart {
display: none;
}

@media screen and (max-width: 768px) {
.shopping-cart {
display: block
}