Я использую Bootstrap 5, и у меня есть <div>
, завернутый в <a>
. Он содержит заголовок, миниатюру изображения и некоторый текст описания. Другими словами, весь блок контента является ссылкой.
Мне удалось переопределить большую часть CSS Bootstrap, но когда дело доходит до этого текста ссылки, он действительно настойчив.
Если я укажу 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>
Я только что добавил 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>
Вы можете добавить класс 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>
Спасибо! Оглядываясь назад, я должен был догадаться, что будет какой-то специальный класс для того, чтобы сделать это "путь Bootstrap". Полезно знать.
Используйте свойство bootstrap
text-decoration-none
в теге<a>
<!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>
Простой! Просто добавьте class(text-decoration-none) в свой тег ссылки.
Пример:
<a href = "#" class = "text-decoration-none">Non-underlined link</a>
Больше подробностей: https://getbootstrap.com/docs/4.2/utilities/text
Вы хотите удалить подчеркивание из всего текста?