在手机模式下隐藏按钮文本 - 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

在bootstrap 3中，hidden-phone课程为changed至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

您可以编写一个简单的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>

Answer 5

对于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>

在超小屏幕上，文本将消失：