将搜索栏折叠到Bootstrap 3中的图标

Question

我正在Boot Strap 3中创建一个响应式布局。

我无法修复可折叠搜索栏。请点击下面的链接查看可折叠菜单的外观。

扩展菜单链接

可折叠菜单链接

请指教。 谢谢

Answer 1

您应该稍微更改一下代码，使其在移动设备上运行。

更改此

<a href="#"><img src="images/iconCart.png" width="14" height="13"> 
Cart <span class="badge">2</span></a>

到此

<a href="#">
<span class="show-mobile"><img src="images/iconCart.png" width="14" height="13"> </span>
<span class="hidden-mobile">Cart</span> 
<span class="badge hidden-mobile">2</span> 
</a>

添加媒体查询CSS，如

@media screen and (max-width: 768px) {
.show-mobile {
 display:inline-block;
}

.hidden-mobile {
display:none;
}

}