Question

我正在使用Bootstrap 4.1，并且想在按钮内显示图标。当然很简单：

<a class="btn btn-primary" href="/users/auth/facebook">
  <i class="fab fa-facebook strong"></i> Facebook
</a>

但是在不动产较小的移动设备上，我只想显示图标，而不是文本。使用Bootstrap 3过去很容易，但是我在4.1文档中找不到解决方案。怎样/应该怎么做？

Answer 1

您可以使用display utilities，只需根据自己的喜好调整断点即可。

d-none d-md-inline表示 Facebook 从最小宽度开始隐藏，直到md断点，然后从md开始，该元素将具有以下样式： display:inline。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<a class="btn btn-primary" href="/users/auth/facebook">
  <i class="fab fa-facebook strong">Icon</i> <span class="d-none d-md-inline">Facebook</span>
</a>

Answer 2

您可以使用媒体查询来做到这一点

.fab {
  display: inline;
}

@media only screen and (max-width: 600px) {
  .fab {
     display: none;
   }
}

Answer 3

可见性类从Bootstrap 3更改了，一开始对我来说也很混乱。 bootstap site中的基本类：

屏幕尺寸类别：

隐藏在所有 .d-none
仅隐藏在xs .d-none .d-sm-block
仅在sm .d-sm-none .d-md-block
仅隐藏在md .d-md-none .d-lg-block
仅在lg .d-lg-none .d-xl-block
仅隐藏在xl .d-xl-none
在所有 .d区块
仅在xs .d-block .d-sm-none
仅在sm .d-none .d-sm-block .d-md-none
仅在md .d-none .d-md-block .d-lg-none
仅在lg .d-none .d-lg-block .d-xl-none
仅在xl .d-none .d-xl-block

Answer 4

首先，将Facebook文本保留在诸如span之类的内联元素中，并使用媒体查询在小屏幕上不显示span内容。

@media（最小宽度：320px）{/ *智能手机，iPhone，纵向480x320手机* /}

@media only screen and (min-width: 320px) {

  a>span{
     display: none;
   }
}

在手机上仅显示图标，在桌面上仅显示图标和文字

4 个答案: