我正在為一個專案使用 Bootstrap。對于內容元素，我創建了一張卡片。在卡片標題中，我使用 col-md-9 作為標題。默認情況下，高度應為 45px。由于頁面應該是回應式的，我嘗試使用 CSS 中的媒體查詢 (@media) 將高度從某個螢屏寬度設定為自動。然而，問題是每個標題的長度不同，因此這個換行點會發生變化。目標是，只要標題中斷，標題就會跳到 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>
這是帶有代碼的沙箱的鏈接：https ://codepen.io/goodyman97/pen/xxpMBbx
uj5u.com熱心網友回復：
您可以嘗試添加更多斷點以獲得所需的結果。以下是使用移動優先方法時使用的一些流行斷點：
/* 超小設備（手機，600px 及以下）*/ @media only screen and (max-width: 600px) {...}
/* 小型設備（縱向平板電腦和大型手機，600px 及以上）*/ @media only screen and (min-width: 600px) {...}
/* 中型設備（橫向平板電腦，768px 及以上）*/ @media only screen and (min-width: 768px) {...}
/* 大型設備（筆記本電腦/臺式機，992px 及以上）*/ @media only screen and (min-width: 992px) {...}
/* 超大設備（大型筆記本電腦和臺式機，1200px 及以上）*/ @media only screen and (min-width: 1200px) {...}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/473124.html