隐藏Bootstrap中的选项值选择某些设备

Question

我有一个“状态”表单字段的Bootstrap选择菜单。在较大的设备上，我为每个下拉列表都有标签，但在较小的设备上，它们是隐藏的。因此，为了让较小的设备知道菜单的用途，我将“state”作为第一个下拉选项。

<div class="form-group">
<label class="col-sm-3 control-label" for="textinput">*State</label>
<div class="col-xs-5 col-lg-3">
<select id="state" class="form-control" name="state">
<option value="State">State</option>
<option value="AA">AA</option>...

有没有更好的方法来包含“状态”这个词而不是选项值？无论哪种方式，如何让它显示较小的设备，但对于较大的设备（标签将显示的位置）保持隐藏？

由于

Answer 1

您可以使用媒体查询来定义屏幕大小：

@media (min-width: 768px) {
}

然后定位你想要在CSS中显示的内容吗？