Twitter bootstrap 3 引导-根据屏幕大小使用不同的类

我只想在屏幕大小为

xs

时添加

表单控件

类。现在所有屏幕尺寸中都添加了

表单控件

。如何使

窗体控件

类仅在屏幕大小为

xs

时添加？

您可以使用两种不同的输入，如下所示：

<input type="submit" class="form-control">

当表单控件不是xs时，这将隐藏表单控件。

您可以使用@media 例如，要在size screen小于768时隐藏侧栏id标记的div： @媒体（这里有一些真正的价值…）

---

应同时使用.xs和.form控件类，如下所示：

@media (max-width: 768px) {
   #sidebar {
      display: none;
  }
}

---

jQuery是另一种方法，它根据窗口宽度添加/删除类。看

*请参阅全屏工作示例，然后重新调整大小以查看更改。

函数检查宽度（init）{
如果（$（窗口）.width（）<480）{
$（'input'）.addClass（'form-control'）；
}否则{
if（！init）{
$（'input'）.removeClass（'form-control'）；
}
}
}
$（文档）.ready（函数（）{
检查宽度（真）；
$（窗口）。调整大小（函数（）{
检查宽度（假）；
});
});
body，
html{
填充顶部：40px；
填充底部：40px；
}
#登录表单{
最大宽度：500px；
填充：15px；
保证金：0自动；
背景：ddd；
}
@介质（最大宽度：480px）{
#登录表单{
背景色：红色；
颜色：白色；
}
}

电子邮件地址
密码
在Bootstrap V4中添加了响应式文本对齐：


对于左对齐、右对齐和中心对齐，可以使用与栅格系统相同的视口宽度断点的响应类

.form-control.xs {/*Write your declerations.*/}

在所有视口大小上居中对齐文本

已复制。
这可能会起作用，但也意味着如果他将表单控件设置为“显示：无”，则无法在xs大小上使用表单控件。您需要删除表单控件以这种方式为此特定元素添加的大部分样式。这是一个不错的解决方案，但是如果他将来想在xs大小上使用表单控件进行其他操作，那么在表单控件上显示隐藏和媒体查询可能不是最好的选择。如果你走这条路，我认为清除你正在处理的元素上的样式将是最好的选择。我认为在你的第一次输入中，你可以将你的类别分组为：
class=“form control hidden lg md sm”>
，但这不是必须的，这样就可以了：
class=“form control hidden sm”>
.form-control.xs {/*Write your declerations.*/}

<p class="text-xs-center">Center aligned text on all viewport sizes.</p>