在 twitter-bootstrap-3 中使用一些（hidden-xs）类时内联对象变成块

Inline objects becomes block while using some (hidden-xs) classes in twitter-bootstrap-3

提问by effe

BOOTPLY HERE

在这里启动

I try to make some buttons text hidden to make them smaller for xs screen size.

我尝试隐藏一些按钮文本，使它们对于 xs 屏幕尺寸更小。

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

There is no problem with element hiding but now spanmakes my button 2 rows. Is there any way to solve this problem.

元素隐藏没有问题，但现在span让我的按钮变成 2 行。有没有办法解决这个问题。

Or is there any better approach to hide button texts in bootstrap?

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

For the ones who still has the same problem

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

If you are using bootstrap 3:http://getbootstrap.com/css/#responsive-utilities

如果您使用的是引导程序 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>

If you are using bootstrap 4:http://v4-alpha.getbootstrap.com/migration/#responsive-utilities

如果您使用的是引导程序 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>

采纳答案by Zim

Since Bootstrap 3 uses..

由于 Bootstrap 3 使用..

.hidden-xs {
    display: block !important;
}

You need to do this..

你需要这样做..

.navbar-btn .hidden-xs {
    display: inline-block !important;
}

@media (max-width: 767px) {
.navbar-btn .hidden-xs {
  display: none!important;
 }
}

to override the blockdisplay of the xsspan.

覆盖跨度的block显示xs。

http://bootply.com/103026

http://bootply.com/103026

回答by Sergey

I think the best way to go around this BS3 issue is to simply add a custom media query to your css. Simply hide the span since I'm sure there might be other elements you wouldn't want to display:block

我认为解决这个 BS3 问题的最佳方法是简单地将自定义媒体查询添加到您的 css 中。只需隐藏跨度，因为我确定可能还有其他您不想要的元素display:block

@media (max-width:768px) {
    .navbar-btn span,
    .other-element {
        display:none;
    }
}

回答by brunettdan

Include the minified css below after Bootstrap 3 and use it like

在 Bootstrap 3 之后包含下面缩小的 css 并像这样使用它

<div class="hidden-xs inline-block"></div>

It only affects the .visible-xx / .hidden-xx elements which also have the .inline-block class

它只影响 .visible-xx / .hidden-xx 元素也有 .inline-block 类

.inline-block{display:inline-block;}
.inline-block.visible-xs{display:none!important;}@media(max-width:767px){.inline-block.visible-xs{display:inline-block!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.visible-xs.visible-sm{display:inline-block!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.visible-xs.visible-md{display:inline-block!important;}
}@media(min-width:1200px){.inline-block.visible-xs.visible-lg{display:inline-block!important;}
}.inline-block.visible-sm{display:none!important;}@media(max-width:767px){.inline-block.visible-sm.visible-xs{display:inline-block!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.visible-sm{display:inline-block!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.visible-sm.visible-md{display:inline-block!important;}
}@media(min-width:1200px){.inline-block.visible-sm.visible-lg{display:inline-block!important;}
}.inline-block.visible-md{display:none!important;}@media(max-width:767px){.inline-block.visible-md.visible-xs{display:inline-block!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.visible-md.visible-sm{display:inline-block!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.visible-md{display:inline-block!important;}
}@media(min-width:1200px){.inline-block.visible-md.visible-lg{display:inline-block!important;}
}.inline-block.visible-lg{display:none!important;}@media(max-width:767px){.inline-block.visible-lg.visible-xs{display:inline-block!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.visible-lg.visible-sm{display:inline-block!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.visible-lg.visible-md{display:inline-block!important;}
}@media(min-width:1200px){.inline-block.visible-lg{display:inline-block!important;}
}.inline-block.hidden-xs{display:inline-block!important;}@media(max-width:767px){.inline-block.hidden-xs{display:none!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.hidden-xs.hidden-sm{display:none!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.hidden-xs.hidden-md{display:none!important;}
}@media(min-width:1200px){.inline-block.hidden-xs.hidden-lg{display:none!important;}
}.inline-block.hidden-sm{display:inline-block!important;}@media(max-width:767px){.inline-block.hidden-sm.hidden-xs{display:none!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.hidden-sm{display:none!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.hidden-sm.hidden-md{display:none!important;}
}@media(min-width:1200px){.inline-block.hidden-sm.hidden-lg{display:none!important;}
}.inline-block.hidden-md{display:inline-block!important;}@media(max-width:767px){.inline-block.hidden-md.hidden-xs{display:none!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.hidden-md.hidden-sm{display:none!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.hidden-md{display:none!important;}
}@media(min-width:1200px){.inline-block.hidden-md.hidden-lg{display:none!important;}
}.inline-block.hidden-lg{display:inline-block!important;}@media(max-width:767px){.inline-block.hidden-lg.hidden-xs{display:none!important;}
}@media(min-width:768px) and (max-width:991px){.inline-block.hidden-lg.hidden-sm{display:none!important;}
}@media(min-width:992px) and (max-width:1199px){.inline-block.hidden-lg.hidden-md{display:none!important;}
}@media(min-width:1200px){.inline-block.hidden-lg{display:none!important;}}