css - Twitter Bootstrap 响应实用程序

标签 css twitter-bootstrap responsive-design

我正在为我建立的网站使用 twitter-bootstrap,当我尝试显示应该只对智能手机用户可见的数据时,我正在处理一个问题;

使用 <div class="visible-phone">This is a test div</div>在智能手机上根本不显示任何数据, 同时<div class="visible-desktop">This is a test div</div>适用于计算机。

我该如何处理这个问题?

提前致谢

最佳答案

查看此问题@ here

修改您的 css 使其看起来像这样可以很好地解决此问题

// Visibility utilities

// For desktops .visible-phone { display: none; } .visible-tablet { display: none; } .visible-desktop { } .hidden-phone { } .hidden-tablet { } .hidden-desktop { display: none; }

// Phones only @media (max-width: 767px) { // Show .visible-phone { } // Hide .hidden-phone { display: none !important; } // Hide everything else .hidden-desktop { } .visible-desktop { display: none !important; } }

// Tablets & small desktops only @media (min-width: 768px) and (max-width: 979px) { // Show .visible-tablet { } // Hide
.hidden-tablet { display: none !important; } // Hide everything else .hidden-desktop { } .visible-desktop { display: none !important; } }

我希望这能解决你的问题

关于css - Twitter Bootstrap 响应实用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16387524/

相关文章:

html - IE8 中输入的 z 索引是怎么回事?

html - 造型一个直接的 child

html - 如何使响应式并排表单元素

jquery - 快速点击下一步使 slider 离开屏幕

javascript - jQuery 自动调整标签高度

html - 动画 Bootstrap 汉堡菜单交叉

html - 使用 Bootstrap 按钮滚动到不同区域

html - 拉伸(stretch)图像以适应整个容器宽度的 Bootstrap

javascript - 如何避免顶部空间并在justgage中制作全尺寸?

css - 使用 css 媒体查询防止主容器拉伸(stretch)超过 1680px