javascript - Bootstrap - 为每个环境调整按钮和文本字段的动态高度

Question

我正在使用 Bootstrap 3 创建一些 HTML 响应式表单，并且我正在尝试做一件事，关于布局。

我想按照以下规则动态更改按钮和文本字段的高度:

1. 在桌面设备上，使用小按钮/文本字段
2. 在移动设备上，使用大按钮/文本字段

我知道我可以使用 these button 来做到这一点和 text field类。但是，我只想在用户从移动设备访问页面时才使用这些类，并非总是如此。

我也知道您可以使用 these classes from Bootstrap Responsive Utilities 显示/隐藏 HTML 元素，但我需要为所有按钮/文本字段提供一个 id，所以我不知道我是否可以复制这些元素并将每个元素包装在将在特定环境中显示的 div 中，因为两个元素具有相同的HTML 规范中的 id 是错误的。

我尝试了一种基于 that solution 的方法，我只是根据每个状态/环境添加/删除这些类。它正在运行，但是有更简单的方法吗？

Answer 1

要根据屏幕尺寸更改特定元素样式，您可以使用媒体查询。例如:

<button class="btn dynamic-button">

CSS:

@media (max-width: @screen-xs-max) {
    .dynamic-button {
        height: 20px;    
    }
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .dynamic-button {
        height: 40px;    
    }
}