javascript - 使用 Jquery 的响应式设计 Bootstrap 中按钮的不同文本大小(例如 LastName、FirstName/FirstName)

Question

我正在处理我的作业，我几乎完成了代码。我只是需要有关独特设计的帮助。

我有 3 个带有一些文本的按钮。对于全屏，文本是 "HelloWorld"、"LastFirst"，但是当在移动设备上看到相同的网站时，这 3 个按钮的文本变为“Hello”， “最后”等

我脑子里几乎没有什么东西，将文本作为标签。如果我为这些标签提供 id 并在需要时隐藏标签。

我想知道是否有正确或更简单的方法来做到这一点？

提前致谢。

Answer 1

我假设您正在使用 Bootstrap。

Bootstrap 有这些 .visible-xs 和 .hidden-xs 类 ( more here )

.hidden-xs 类帮助您仅在手机上隐藏元素。

<button type="button" class="btn btn-primary">
  Hello <span class="hidden-xs"> World </span>
</button>
<button type="button" class="btn btn-primary">
  Last <span class="hidden-xs"> First </span>
</button>

如果您不使用 Bootstrap ，则可以使用媒体查询实现相同的目的。

@media screen and (max-width: 300px) {
  .hidden-xs {
    display: none;
  }
}

<button type="button" class="btn btn-primary">
  Hello <span class="hidden-xs"> World </span>
</button>
<button type="button" class="btn btn-primary">
  Last <span class="hidden-xs"> First </span>
</button>