Twitter bootstrap 引导3-如何在特定设备上隐藏输入组btn
我希望在超小型设备上查看时隐藏输入组btn。实现这一目标的适当方式是什么 我尝试了以下方法:Twitter bootstrap 引导3-如何在特定设备上隐藏输入组btn,twitter-bootstrap,twitter-bootstrap-3,Twitter Bootstrap,Twitter Bootstrap 3,我希望在超小型设备上查看时隐藏输入组btn。实现这一目标的适当方式是什么 我尝试了以下方法: <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn hidden-xs"> <button type="button" class="btn btn-defaul
<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 -->
行动
但它会弄乱输入组的渲染
没有“隐藏的X”:
使用“隐藏的X”:
不幸的是,Bootstrap 3中不支持使用表上-*元素:
响应实用程序当前仅可用于块和表切换。当前不支持与内联和表元素一起使用
.hidden-*
类在显示:块之间切换元素
和显示:无
,这将破坏您的布局,因为。输入组
和。输入btn组
使用表格显示值。我不确定这方面的解决方法。@Focus是对的,使用[responsive utility classes][3]是不可能的,但我设法解决了这个问题
CSS
HTML
行动
怎么搞砸了?在引导层上看起来不错。这是一个混乱,因为输入应该是宽度的100%,并且输入组btn在可见时出现在新行上。删除“隐藏的xs”类,您将看到它的外观。啊!因此,这意味着必须复制我的输入goup以实现我想要的:(恐怕是这样。我找不到替代的解决方法:(我设法解决了它-请参阅我问题的更新:)@gpcola您可以添加解决方案编辑作为答案。这将使其更清晰,并允许其独立于问题进行投票/评论。
@media (max-width: 768px) {
.hidebtn-xs, .hidebtn-xs input {
display: block !important;
}
.hidebtn-xs .input-group-btn {
display: none !important;
}
}
<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 -->