我有標簽，我希望它們具有相同的寬度，但要使其適合具有最長文本的標簽。
我現在做的是，因為我知道最長的文本選項卡，所以我手動設定寬度為rem. 但如果添加的新文本比設計的文本長，就會發生這種情況（在整頁中觀看）：
.nav-link {
width: 12rem;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">
<title>Tabs</title>
</head>
<body>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active text-center"" href="#">Some Very Very Long Text</a>
</li>
<li class="nav-item">
<a class="nav-link text-center"" href="#">Some Link</a>
</li>
<li class="nav-item">
<a class="nav-link text-center"" href="#">Another Link</a>
</li>
<li class="nav-item">
<a class="nav-link text-center"">Link</a>
</li>
</ul>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>
</html>在此示例中，長文本使制表符換行，因為寬度是固定的。同樣在這種情況下，其他選項卡的選項卡高度不會下降以填充高度，只是在底部留有間距。我該如何處理這兩種情況？（寬度相等，如果所有選項卡及其文本分隔線都沒有空間，則適合高度）
uj5u.com熱心網友回復：
不確定如何使用純 css 解決方案來完成。我有興趣看到 tacoshy 提到的網格方法。
但這里有一種使用了一些 JS 的方法。
所以你可以做的是創建一個名為 的 CSS 變數--link-width: max-content。基本上每個鏈接都足夠寬，以使其內容適合一行。
然后您可以計算具有最大寬度的鏈接并將該值設定為 CSS 變數。由于在nav-link類上使用了該變數，因此新寬度將應用于所有鏈接。
注意：我們使用offsetWidth計算元素的寬度而不是clientWidth因為 offsetWidth 也考慮了邊框
顯示代碼片段
function adjustLinkWidth() {
const navLinks = document.querySelectorAll('.nav-link')
let maxWidth = navLinks[0].offsetWidth
navLinks.forEach((link) => {
if (maxWidth < link.offsetWidth) {
maxWidth = link.offsetWidth
}
})
document.documentElement.style.setProperty('--link-width', maxWidth 'px')
}
adjustLinkWidth():root {
--link-width: max-content;
}
.nav-link {
width: var(--link-width);
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">
<title>Tabs</title>
</head>
<body>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active text-center"" href="#">Some Very Very Long Text</a>
</li>
<li class="nav-item">
<a class="nav-link text-center"" href="#">Some Link that is longer than the first link</a>
</li>
<li class="nav-item">
<a class="nav-link text-center"" href="#">Another Link</a>
</li>
<li class="nav-item">
<a class="nav-link text-center"">Link</a>
</li>
</ul>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>
</html>雖然，正如您在本例中看到的那樣，如果您的選項卡最終變得太寬，它們看起來會很奇怪，所以最好不要讓所有選項卡的寬度都相同
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/534531.html
標籤：CSS推特引导程序引导程序 4