我正在为我建立的网站使用 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/