我正在使用 Bootstrap 5 并且有一個<div>包裝在<a>. 它包含標題、縮略圖和一些描述文本。換句話說，整個內容塊是一個鏈接。
我已經能夠覆寫大部分 Bootstrap 的 CSS，但是當涉及到這個鏈接文本時，它真的很持久。
如果我指定display: inline-block下劃線消失。但我也想要inline這里的文字。text-decoration: none沒有生效。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Underline</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="py-0">
<main>
<div class="row mb-3 report-with-img-cont">
<div class="col-md-8 col-lg-9 report-previews themed-grid-col">
<a href="/">
<div>
<div>
<h5>
<span>This is a Title</span>
</h5>
</div>
<div class="row">
<div class="col-md-12 col-lg-4 themed-grid-col"><img src="https://via.placeholder.com/160x90"></div>
<div class="col-md-12 col-lg-8 themed-grid-col"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></div>
</div>
</div>
</a>
</div>
</div>
</main>
</body>
</html>uj5u.com熱心網友回復：
您可以text-decoration-none在標簽中添加類<a>，這將洗掉鏈接文本上的強制下劃線。并參考以下鏈接：https ://getbootstrap.com/docs/5.0/utilities/text/#text-decoration
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Underline</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="py-0">
<main>
<div class="row mb-3 report-with-img-cont">
<div class="col-md-8 col-lg-9 report-previews themed-grid-col">
<a href="/" class="text-decoration-none">
<div>
<div>
<h5>
<span>This is a Title</span>
</h5>
</div>
<div class="row">
<div class="col-md-12 col-lg-4 themed-grid-col"><img src="https://via.placeholder.com/160x90"></div>
<div class="col-md-12 col-lg-8 themed-grid-col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
</div>
</a>
</div>
</div>
</main>
</body>
</html>uj5u.com熱心網友回復：
簡單的！只需將 class(text-decoration-none) 添加到您的鏈接標簽。
例子：
<a href="#" class="text-decoration-none">Non-underlined link</a>
更多詳情： https ://getbootstrap.com/docs/4.2/utilities/text
uj5u.com熱心網友回復：
我剛剛text-decoration:none;在你的<a>標簽中添加了一個行內 CSS，它就像一個魅力。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Underline</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="py-0">
<main>
<div class="row mb-3 report-with-img-cont">
<div class="col-md-8 col-lg-9 report-previews themed-grid-col">
<a href="/" style="text-decoration: none;">
<div>
<div>
<h5>
<span>This is a Title</span>
</h5>
</div>
<div class="row">
<div class="col-md-12 col-lg-4 themed-grid-col"><img src="https://via.placeholder.com/160x90"></div>
<div class="col-md-12 col-lg-8 themed-grid-col"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></div>
</div>
</div>
</a>
</div>
</div>
</main>
</body>
</html>
uj5u.com熱心網友回復：
text-decoration-none在<a>標簽中使用 bootstrap 屬性
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Underline</title>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="py-0">
<main>
<div class="row mb-3 report-with-img-cont">
<div class="col-md-8 col-lg-9 report-previews themed-grid-col">
<a href="/" class="text-decoration-none">
<div>
<div>
<h5>
<span>This is a Title</span>
</h5>
</div>
<div class="row d-flex">
<div class="col-md-12 col-lg-4 themed-grid-col"><img src="https://via.placeholder.com/160x90"></div>
<div class="col-md-12 col-lg-8 themed-grid-col"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></div>
</div>
</div>
</a>
</div>
</div>
</main>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/528247.html
標籤：css推特引导遗产
上一篇：E0298不允許繼承成員