找出 CSS 媒体查询的分页宽度

Question

我正在为一个项目使用 Bootstrap。我为内容元素创建了一张卡片。在卡片 header 中，我使用 col-md-9 作为标题。默认情况下，高度应为 45px。由于页面应该是响应式的，我尝试使用 CSS 中的媒体查询 (@media) 从特定屏幕宽度将高度设置为自动。然而，问题在于每个标题的长度不同，因此换行的点会发生变化。目标是一旦标题中断 header 跳转到 height: auto;在 CSS。有人知道建议吗？

非常感谢！

<div class="card-header">
  <b class="card-ueber col-md-9">Hello together, this is an long text. It should serve as an example and flood this bar with text. 1234567890</b>
  <div class="ca-h-ico"><a class="ico-link" data-bs-toggle="collapse" href="#collapseExample" role="button"
      aria-expanded="false" aria-controls="collapseExample"><span class="icon"><i class="fas fa-info-circle"></i></span></a>
    <a class="ico-link" href="#"><span class="ico-pr"><i class="fa fa-print"></i></span></a>
  </div>
</div>

这里是 link 沙箱代码：https://codepen.io/goodyman97/pen/xxpMBbx

Answer 1

您可以尝试添加更多断点以获得所需的结果。以下是使用 mobile-first 方法时使用的一些流行断点：

/* 超小型设备（手机，600px 及以下）*/ @media only screen and (max-width: 600px) {...}

/* 小型设备（纵向平板电脑和大型手机，600 像素及以上）*/ @media only screen and (min-width: 600px) {...}

/* 中型设备（横向平板电脑，768 像素及以上）*/ @media only screen and (min-width: 768px) {...}

/* 大型设备（laptops/desktops，992 像素及以上）*/ @media only screen and (min-width: 992px) {...}

/* 超大设备（大型笔记本电脑和台式机，1200 像素及以上）*/ @media only screen and (min-width: 1200px) {...}

找出 CSS 媒体查询的分页宽度

Find out the width of the pagination for CSS media query

html

css

twitter-bootstrap