如何知道 Twitter Bootstrap 处于哪种状态/格式

Question

Twitter Bootstrap通常使用4种不同的屏幕格式，分别是：XS，SM，MD和LG。在开发和测试时，我经常想知道当时使用的是哪一个。

有没有办法始终知道处理哪种格式而无需使用任何开发人员工具？

Answer 1

我用"debug"类编写了一个简短的div代码。

使用简单的 HTML 和 CSS，您可以在显示中显示具有当前屏幕尺寸的div。每个开发人员都应该能够编写此内容。但我仍然以为我会分享它，也许你没有想到。

.HTML

<div class="debug hidden-xs hidden-sm hidden-md">Size: LG - Large</div>
<div class="debug hidden-xs hidden-sm hidden-lg">Size: MD - Medium</div>
<div class="debug hidden-xs hidden-md hidden-lg">Size: SM - Small</div>
<div class="debug hidden-sm hidden-md hidden-lg">Size: XS - Extra small</div>

.CSS

.debug{ width: 100%; position: fixed; bottom: 0; background: #ed2901; color: #FFF; text-align: center; line-height: 20px; }

Answer 2

我对主要答案的小改进。将此 HTML 片段添加到页面上的任何位置。

<div style="width:100%;position:fixed;bottom:0px;background: rgba(200,0,0,0.7);
 color:#fff; text-align:center;z-index:1000">
<span class="debug hidden-xs hidden-sm hidden-md">Size: XS SM MD <b>LG</b></span>
<span class="debug hidden-xs hidden-sm hidden-lg">Size: XS SM <b>MD</b> LG</span>
<span class="debug hidden-xs hidden-md hidden-lg">Size: XS <b>SM</b> MD LG</span>
<span class="debug hidden-sm hidden-md hidden-lg">Size: <b>XS</b> SM MD LG</span>
 | ViewportWidth: <span id='viewportwidth'></span>
</div>
<script>
window.addEventListener('resize', function(event){  updateWidthInfo(); });
document.addEventListener('DOMContentLoaded', function(event){  updateWidthInfo(); });
function updateWidthInfo() {
    document.getElementById('viewportwidth').innerHTML = getViewportWidth();
    function getViewportWidth(w) {
        w = w || window;
        if (w.innerWidth != null) return  w.innerWidth;
        var d = w.document;
        if (document.compatMode == "CSS1Compat")   return d.documentElement.clientWidth;
        else return d.body.clientWidth;
    }
}
</script>

这也显示了当前宽度。