在twitter-bootstrap-3中使用一些(hidden-xs)类时,内联对象变为块

Question

BOOTPLY HERE

我尝试隐藏一些按钮文本,使它们的xs屏幕尺寸更小.

<button class="btn navbar-btn btn-primary">
    <i class="fa fa-font"></i>
    <span class="hidden-xs">Add Text</span>
</button>

元素隐藏没有问题,但现在span使我的按钮2行.有没有办法解决这个问题.

或者有没有更好的方法来隐藏引导程序中的按钮文本？

对于那些仍有同样问题的人

如果您使用的是bootstrap 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>

如果您使用的是bootstrap 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>

Answer 1

自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;
 }
}

覆盖范围的block显示xs.

http://bootply.com/103026