我有一个内联表单，有几个输入。
在较大的设备中，我想用“label”来表示字段类型，但在较小的设备中，
我想用“占位符”来节省空间。 对于'label'，我可以使用引导类d-none和d-sm-block。
如何有条件地为较小的设备显示“占位符”？
null
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<form class="form-inline">
<label class="control-label d-none d-sm-block mr-2" for="id1">Country</label>
<input type="text" id="id1" placeholder="input country">
</form>
</body>
</html>null
首先，在我看来，没有理由在任何设备中隐藏占位符。 因为它的存在是为了为输入元素创建交互式控件。 但是在任何情况下，如果您坚持要在任何设备中删除它，您都可以使用::placeholder伪元素，如下所示:
input::placeholder {
color: transparent;
}
以使占位符消失。
因此，对于更精确的示例，您可以看到下面的代码片段，其中我为设备定义了最大宽度为767px的介质。您可以将其更改为任何您想要的内容。
null
@media only screen and (max-width: 767px) {
::-webkit-input-placeholder {
/* WebKit browsers */
color: transparent;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: transparent;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: transparent;
}
input::placeholder {
color: transparent;
}
}<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<form class="form-inline">
<label class="control-label d-none d-sm-block mr-2" for="id1">Country</label>
<input type="text" id="id1" placeholder="input country">
</form>
</body>
</html>