我想在超小型设备上查看时隐藏输入组-btn.实现这个目标的适当方法是什么?
我尝试过以下方法:
<div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn hidden-xs"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <ul class="dropdown-menu pull-right"> <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> </ul> </div><!-- /btn-group --> </div><!-- /input-group -->
但它会混淆输入组http://bootply.com/81206的渲染
没有’hidden-xs’:
使用’hidden-xs’:
解决方法
不幸的是,Bootstrap 3不支持在table- *元素上使用
responsive utility classes:
Responsive utilities are currently only available for block and table toggling. Use with inline and table elements is currently not supported.
.hidden- *类在display:block之间切换一个元素;和display:none打破布局,因为.input-group和.input-btn-group使用表格显示值.我不确定这方面的解决方法.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。