html - 大型元素类的 Bootstrap 3.0 响应式 css

标签 html css twitter-bootstrap twitter-bootstrap-3

我想让所有输入和按钮元素在 < 767 像素的屏幕上显示为正常大小。如果它是 > 767px 的屏幕,尽管我需要将 .btn-lg 和 .input-lg 类应用于所有按钮和输入。这样可以在更大的屏幕上获得更轻松的触摸体验。如何才能做到这一点?可以用纯 CSS 来完成吗??

最佳答案

你可以用媒体查询来做

@media screen and (max-width:767px){
//all the styles for btns within 767px
}
@media screen and (min-width:767px){
//all styles above 767px
}

您也可以使用 jquery 实现此目的:

if($(window).outerHeight(true) <  767){
   //add class to your btns and lists and remove classes...
}

这是一种方法,还有很多。

关于html - 大型元素类的 Bootstrap 3.0 响应式 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18684150/

相关文章:

jquery - AjaxUpload 和修改后的输入文件类型不能一起工作

javascript - 检查 div 内发生的链接点击

html - CSS 标题问题

css - 无限闪烁的 CSS3 动画

javascript - Shadow-Piercing 后代组合子 '/deep/' ,包括 '::shadow' 伪元素,正在被弃用,那么我们如何穿透 Shadow DOM?

html - 无法让 float div 与文本对齐中心一起使用

javascript - YouTube 视频继续播放由 JavaScript 触发的 CSS 弹出窗口

jquery - 如果在外部单击则隐藏/切换

html - Bootstrap 列比例

php - 在 Bootstrap 输入中放置错误消息