调整屏幕大小时显示引导带断点名称

Question

我使用引导5来开发响应性应用程序

它有6个断点

• xs
• sm
• md
• lg
• xl
• xxl

如果铬开发工具能给我显示当前宽度的缩写，那就非常方便了。

举个例子。见"XX“

​

​

我知道我可以修改我的HTML以获得结果，但是一个不改变我正在处理的HTML的解决方案将会非常酷。

在上面的例子中，宽度是474，它小于576px，这意味着断点的名称将是xs。

Answer 1

这就是我所用的。它帮助我，即使不是在检查模式，并继续工作，甚至你改变断点使用bs变量。

<div style="
    position: fixed;
    top: 90%;
    left: 50%;
    z-index: 10000;
    transform: translate(-50%, -50%);
    background: rgba(247, 201, 241, 0.4);
    padding: .5rem 1rem;
    border-radius: 30px;
">
    <div class="d-block d-sm-none">Extra Small (xs)</div>
    <div class="d-none d-sm-block d-md-none">Small (sm)</div>
    <div class="d-none d-md-block d-lg-none">Medium (md)</div>
    <div class="d-none d-lg-block d-xl-none">Large (lg)</div>
    <div class="d-none d-xl-block d-xxl-none" >X-Large (xl)</div>
    <div class="d-none d-xxl-block" >XX-Large (xxl)</div>
</div>

​

​

Answer 2

基于Natwar的回答，为了使它更加“引导”，并确保我们自己没有写任何css，我有以下内容：

<div class="position-fixed text-nowrap rounded-3 p-1 m-3 bg-info opacity-50">
  <div class="d-block d-sm-none">Extra Small (xs)</div>
  <div class="d-none d-sm-block d-md-none">Small (sm)</div>
  <div class="d-none d-md-block d-lg-none">Medium (md)</div>
  <div class="d-none d-lg-block d-xl-none">Large (lg)</div>
  <div class="d-none d-xl-block d-xxl-none">X-Large (xl)</div>
  <div class="d-none d-xxl-block">XX-Large (xxl)</div>
</div>

Answer 3

因为您已经知道了带有Bootstrap 5.x的默认断点，所以您可以将一些简单的CSS应用到您的项目中，以实现类似的目标。在下面的代码示例中，我有一个名为.debug的类，您可以将它应用于任何元素(我会根据您的需要推荐<body> )。

它所做的非常简单:它创建了一个绝对定位的伪元素，我们将content: ""应用于特定的断点，以传递我们所命中的断点。

​

.debug::before {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  right: 0;
  z-index: 1;
  padding: 0.25rem 0.5rem;
  background: rgba(0,0,0,0.75);
  color: #fff;
  border-radius: 0 0 0 0.25rem;
}

@media (min-width: 0px) { 
  .debug::before { content: "XS"; }
}

@media (min-width: 576px) { 
  .debug::before { content: "SM"; }
}

@media (min-width: 768px) { 
  .debug::before { content: "MD"; }
}

@media (min-width: 992px) { 
  .debug::before { content: "LG"; }
}

@media (min-width: 1200px) { 
  .debug::before { content: "XL"; }
}

@media (min-width: 1400px) { 
  .debug::before { content: "XXL"; }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

<div class="debug">
  <h1>You'll want to see this in fullscreen to test it out!</h1>
</div>

​