BOOTPLY HERE
我尝试使一些按钮文本隐藏,使它们更小的xs屏幕大小.
<button class="btn navbar-btn btn-primary">
<i class="fa fa-font"></i>
<span class="hidden-xs">Add Text</span>
</button>
元素隐藏没有问题,但现在跨度使我的按钮2行.有没有办法解决这个问题.
还是有更好的方法来隐藏按钮文本的引导？
对于那些仍然有同样问题的人
如果您使用引导3：
http://getbootstrap.com/css/#responsive-utilities
<button class="btn navbar-btn btn-primary">
<i class="icon-picture"></i>
<span class="visible-sm-inline visible-md-inline visible-lg-inline">Add Image</span>
</button>
如果你使用引导4：
http://v4-alpha.getbootstrap.com/migration/#responsive-utilities
<button class="btn navbar-btn btn-primary">
<i class="icon-picture"></i>
<span class="hidden-xs-down">Add Image</span>
</button>
解决方法
由于Bootstrap 3使用..
.hidden-xs {
display: block !important;
}
你需要这样做..
.navbar-btn .hidden-xs {
display: inline-block !important;
}
@media (max-width: 767px) {
.navbar-btn .hidden-xs {
display: none!important;
}
}
以覆盖xs跨度的块显示.
