Bootstrap -每个环境中按钮和文本字段的动态高度大小

Bootstrap - Dynamic height sizing on buttons and text fields, for each environment

本文关键字：字段 动态 高度 文本 环境 按钮 Bootstrap      更新时间：2023-09-26

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

我想通过以下规则动态地改变按钮和文本字段的高度:

  1. 在桌面设备上，使用小按钮/文本字段
  2. 在移动设备上，使用大的按钮/文本字段
我知道我可以通过使用这些按钮和文本字段类来做到这一点。但是，我希望只有当用户从移动设备访问页面时才使用这些类，而不是总是这样。

我也知道，你可以通过使用这些类从Bootstrap Responsive Utilities显示/隐藏HTML元素，但我需要给所有的按钮/文本字段一个id，所以我不知道我是否可以复制这些元素和包装每个然后在一个div内，将显示在一个特定的环境，因为两个元素具有相同的id是错误的HTML规范。

我尝试了一种基于该解决方案的方法，我只是根据每个状态/环境添加/删除这些类。这是有效的，但有没有更简单的方法呢?

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

<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;    
    }
}
相关文章：