Bootstrap 3中的sr-only是什么？

Question

该类的sr-only用途是什么？是重要的还是我可以删除它？工作正常，没有。

这是我的示例：

<div class="btn-group">
    <button type="button" class="btn btn-info btn-md">Departments</button>
    <button type="button" class="btn btn-info dropdown-toggle btn-md" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Sales</a></li>
        <li><a href="#">Technical</a></li>
        <li class="divider"></li>
        <li><a href="#">Show all</a></li>
    </ul>
</div>

Answer 1

根据bootstrap的文档，该类用于从呈现的页面的布局中隐藏仅用于 屏幕阅读器的 信息。

如果您没有为每个输入都添加标签，那么屏幕阅读器将在您的表单上遇到麻烦。对于这些内联表单，您可以使用.sr-only类隐藏标签。

这是使用的示例]样式：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

是重要的还是我可以删除它？工作正常，没有。

重要的是，请勿删除它。

您应该始终将屏幕阅读器用于辅助功能。使用该类无论如何都会隐藏该元素，因此您不应看到视觉上的差异。