css - Twitter 引导响应实用程序

Question

我正在为我建立的网站使用 twitter-bootstrap，并且一旦我尝试显示应该只对智能手机用户可见的数据，我就会处理一个问题；

using<div class="visible-phone">This is a test div</div>在智能手机上根本不显示任何数据，而<div class="visible-desktop">This is a test div</div>在计算机上工作得很好。

我该如何处理这个问题？

提前致谢

Answer 1

看这个问题@这里

修改你的css看起来像这样是解决这个问题的好方法

// 可见性实用程序

// 对于桌面 .visible-phone { display: none; } .visible-tablet { 显示：无；} .visible-desktop { } .hidden-phone { } .hidden-tablet { } .hidden-desktop { 显示：无；}

// 仅限手机 @media (max-width: 767px) { // 显示 .visible-phone { } // 隐藏 .hidden-phone { display: none !important; } // 隐藏其他所有内容 .hidden-desktop { } .visible-desktop { display: none !important; } }

// 仅限平板电脑和小型桌面 @media (min-width: 768px) and (max-width: 979px) { // 显示 .visible-tablet { } // 隐藏 .hidden-
tablet { display: none !important; } // 隐藏其他所有内容 .hidden-desktop { } .visible-desktop { display: none !important; } }

我希望这能解决你的问题