5

I wish to hide an input-group-btn when viewed on extra-small devices. What is the appropriate way to achieve this?

I've tried the following:

    <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 -->

But it messes up the rendering of the input-group http://bootply.com/81206

Without 'hidden-xs':

enter image description here

With 'hidden-xs':

enter image description here

4

2 回答 2

2

@Focus 是对的，使用 [响应式实用程序类] [3] 这是不可能的，但我设法解决了它http://bootply.com/81230

CSS

@media (max-width: 768px) {
    .hidebtn-xs, .hidebtn-xs input {
        display: block !important;
    }
    .hidebtn-xs .input-group-btn {
        display: none !important;
    }
}

HTML

    <div class="input-group hidebtn-xs">
        <input type="text" class="form-control">
        <div class="input-group-btn">
            <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 -->
于 2017-04-14T14:12:00.543 回答
0

不幸的是，Bootstrap 3 不支持在 table-* 元素上使用响应式实用程序类：

响应式实用程序目前仅可用于块和表切换。当前不支持与内联和表格元素一起使用。

这些.hidden-*类在一个元素之间切换一个元素display: block;，display: none它会破坏你的布局，.input-group并.input-btn-group使用表格显示值。我不确定解决方法。

于 2013-09-16T13:05:46.913 回答