twitter-bootstrap – Bootstrap 3 – 如何在特定设备上隐藏inpu

发布时间：2020-12-17 20:42:54 所属栏目：安全来源：网络整理

导读：我想在超小型设备上查看时隐藏输入组-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 dropd

我想在超小型设备上查看时隐藏输入组-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使用表格显示值.我不确定这方面的解决方法.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!