Как переопределить CSS Bootstrap, заставляющий подчеркивать текст ссылки?

Я использую 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>

Вы хотите удалить подчеркивание из всего текста?

Aman 07.11.2022 05:06
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
1
52
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Я только что добавил 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". Полезно знать.

Mentalist 09.11.2022 05:36

Используйте свойство 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

Другие вопросы по теме

Как зациклить пользовательский тип записи, используя цикл while в WordPress
Как выполнить проверку на стороне клиента в форме Angular для пустых полей
Выравнивание изображения и текста по центру внутри списка
Меню гамбургера нестабильно на экране мобильного устройства с использованием Bootstrap 5
Как ограничить максимальную ширину контейнера Bootstrap 5 с помощью SASS?
Выпадающее меню выбора Bootstrap закрывается, когда я нажимаю кнопку всплывающего окна (внутри раскрывающегося списка)
Я пытаюсь расположить карту изображения так, чтобы она перекрывала верхнюю границу карты, используя «начальную загрузку», нужна помощь. или я могу сделать это только с помощью CSS?
Как персонализировать флажок переключателя в Bootstrap 5
Как ограничить количество символов и поставить... в конце
Как сделать, чтобы первый аккордеон (FAQ) был открытым, а остальные закрытыми в wordpress