如何覆盖Bootstrap的CSS强制在链接文本上加下划线？

wbgh16ku 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(4)|浏览(232)

我正在使用Bootstrap 5，并且有一个<div>，它被 Package 在一个<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/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/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>

twitter-bootstrap

来源：https://stackoverflow.com/questions/74341555/how-to-override-bootstraps-css-forcing-underlines-on-link-text

4条答案

按热度按时间

ncgqoxb01#

您可以在<a>标记中添加text-decoration-none类，这将删除链接文本上的强制下划线。并引用以下链接：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/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/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>

赞(0）回复(0）举报 2022-12-07

xt0899hw2#

简单！只需在链接标记中添加class（text-decoration-none）即可。

范例：

<a href="#" class="text-decoration-none">Non-underlined link</a>

如需详细信息：https://getbootstrap.com/docs/4.2/utilities/text

赞(0）回复(0）举报 2022-12-07

ufj5ltwl3#

我只是在<a>标签中添加了text-decoration:none;作为内联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/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/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>

赞(0）回复(0）举报 2022-12-07

wlzqhblo4#

在<a>标记中使用 Bootstrap 属性**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/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/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>

赞(0）回复(0）举报 2022-12-07

我来回答

如何覆盖Bootstrap的CSS强制在链接文本上加下划线？

4条答案

相关问题

热门标签

最新问答