[英]Make dropdown parent link clickable for smaller devices and hide dropdown in Bootstrap
I am working with a site using HTML5 and CSS3, and using a Bootstrap 3.2. 我正在使用HTML5和CSS3并使用Bootstrap 3.2的网站。
I have a dropdown for shopping cart item in desktop view. 我在桌面视图中有一个购物车项目的下拉菜单。 However, I need to remove this dropdown for small mobile device and instead make the cart link clickable.
但是,我需要为小型移动设备删除此下拉菜单,而应使购物车链接可点击。
Currently, the cart link is not clickable as it is opening a dropdown on click! 目前,购物车链接不可点击,因为它打开了点击下拉菜单!
Can anyone advise how can I fix this? 谁能建议我该如何解决?
You can actually hold two attributes to the CART 您实际上可以拥有CART的两个属性
This doesn't show on mobile 这不会在手机上显示
<div class="hidden-xs dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Cart
<span class="caret"></span>
</button>
...
</div>
In the next line hold a link, this doesn't show upon any desktop screens/small screen (tablets) 在下一行中保留一个链接,该链接不会显示在任何桌面屏幕/小屏幕(平板电脑)上
<a class="hidden-sm hidden-md hidden-lg" href="cart">Cart</a>
I hope this what is required. 我希望这是必需的。
Try this: 尝试这个:
CSS: CSS:
@media (max-width: 767px) {
.dropdown-menu {
display: block;
}
}
/* Landscape phones and smaller */
@media (max-width: 480px) {
.dropdown-menu {
display: block;
}
}
HTML: HTML:
<div class="dropdown">
<a href="#" class="dropdown-toggle hidden-xs" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.