html - 在电话模式下隐藏按钮文本 - Bootstrap

Question

我正在制作一个应用程序，我想在其中隐藏按钮文本，以便在“电话模式”中节省宝贵的空间。所有的按钮都有图标，这样就足够了。

我想有一个纯 css 解决方案，但我想不出任何东西。

这是一个按钮的样子：

<button type="submit" name="btnSave" id="btnSave" class="btn btn-primary"><i class="icon-save"></i> Save</button>

我想补充一点，它也可以是：

<a class="btn btn-warning"><i class="icon-trash"></i> Delete</a>

所以基本上，如果响应模式是电话，.btn 选择器中的所有文本都应该被隐藏。但是图标需要保留。

我试过text-ident了，但这也隐藏了图标。

Answer 1

我会使用内置的 twitter bootstrap 类.hidden-phone。

    <button type="submit" name="btnSave" id="btnSave" class="btn btn-primary">
           <i class="icon-save"></i> <span class="hidden-phone">Save</span>
    </button>

http://twitter.github.com/bootstrap/scaffolding.html#responsive

Answer 2

在引导程序 3 中，hidden-phone该类更改为hidden-xs. 事实上，hidden-现在可以与其他设备大小前缀一起使用，例如lg,sm等等...

Answer 3

这是你想要的吗？

<button type="submit" name="btnSave" id="btnSave" class="btn btn-primary">
    <i class="icon-save icon-white"></i>
    <span class="hidden-phone">Save</span>
</button>

bootstrap-responsive.css如果它不起作用，请确保您已包含在内。

Answer 4

对于 Bootstrap 4，您可以使用display property。因此，这些类使用以下格式命名：

.d-{value} for xs
.d-{breakpoint}-{value} for sm, md, lg, and xl.

所以你的代码应该是这样的：

<button type="submit" name="btnSave" id="btnSave" class="btn btn-primary">
    <i class="icon-save"></i> <span class="d-none d-sm-inline">Save</span>
</button>

对于超小（xs）屏幕，文本将消失：

Answer 5

您可以像这样编写一个简单的 CSS 规则：

@media screen and (max-width: 576px) and (min-width: 0px) {
  .desktop-only {
    display: none;
}

进而

   <button type="submit" name="btnSave" id="btnSave" class="btn btn-primary">
           <i class="icon-save"></i> <span class="desktop-only">Save</span>
    </button>