代码之家  ›  专栏  ›  技术社区  ›  PFL

如何使引导程序5卡可点击

bootstrap-5 frontend visual-studio css html
  •  1
  • PFL  · 技术社区  · 10 月前

    我是Bootstrap 5、html和CSS的新手。然而,我正在用它们创建一个网站,我也在用Bootstrap 5创建卡片,但我想让卡片可以点击,这样它们就可以链接到网站上的另一个页面。但在添加了锚标签后,该卡仍然无法点击。

    测试.html 

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Home |</title>

<meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />

<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="../css/index.css" />
<link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Default"
    disabled
          href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
        >
        <link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Web Awesome"

          href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
        >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css"
          >
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>

  <!-- SERVICES SECTION START -->
  <section>
    <div class="container">
        <div class="row py-5">
            <h2 class="display-6 mb-4">Our Services</h2>
        <div class="col-lg-4 col-md-6">
          <a href="/about.html" class="nav-link"></a>
          <div class="card text-center p-4 mb-2 crd">
            <i class="fa-solid fa-camera-cctv fa-3x"></i>
            <h4>CCTV Services</h4>
            <p class="p-2">
              <b>CCTV Services</b> are an essential component of any business. CCTV provides real-time monitoring of multiple locations; the security they supply is indispensable, allowing businesses to have peace of mind knowing that...
            </p>
          </div>
        </div>
        <!-- <div class="col-lg-4 col-md-6">
          <div class="card text-center p-4 mb-2">
            <i class="fa-solid fa-sign-hanging fa-3x"></i>
            <h4>Digital Signage</h4>
            <p class="p-2">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
              voluptatum, voluptate, quibusdam, quia voluptas quod quos
              exercitationem quae voluptatibus doloribus quidem. Quisquam
            </p>
          </div>
        </div> -->
        <div class="col-lg-4 col-md-6">
          <div class="card text-center p-4 mb-2 crd">
            <i class="fa-solid fa-database fa-3x"></i>
            <h4>Datacenter Support</h4>
            <p class="p-2">
              <b>Datacenters</b> are the foundation of many modern businesses, providing the infrastructure and resources necessary to save, process, and dispense data. They produce an off-premises location to secure and back up your business's data.
            </p>
          </div>
        </div>
        <div class="col-lg-4 col-md-6">
          <div class="card text-center p-4 mb-2 crd">
            <i class="fa-solid fa-sign-hanging fa-3x"></i>
            <h4>Digital Signage</h4>
            <p class="p-2">
              <b>Digital Signage</b> has grown rapidly over the last two decades well beyond just a flashy trend for big businesses in the realm of marketing and advertising, and the general dissemination of information. Now it has become the expected strategy.
            </p>
          </div>
        </div>
        <div class="col-lg-4 col-md-6">
          <div class="card text-center p-4 mb-2 crd">
            <i class="fa-solid fa-headset fa-3x"></i>
            <h4>General Support</h4>
            <p class="p-2">
              <b>General Support</b> is a crucial element to every modern business; providing essential support to businesses of all shapes and sizes. The focal point of General Support is to... 
            </p>
          </div>
        </div>
        <div class="col-lg-4 col-md-6">
          <div class="card text-center p-4 mb-2 crd">
            <i class="fa-solid fa-server fa-3x"></i>
            <h4>Network Support</h4>
            <p class="p-2">
              <b>Network Support</b> includes making sure all networking hardware, software, and other related dependencies are both up to date and functioning properly. Monitoring the network for potential problems...
            </p>
          </div>
              </div>
      <div class="col-lg-4 col-md-6">
        <div class="card text-center p-4 mb-2 crd">
          <i class="fa-solid fa-bars fa-3x"></i>
          <h4>Additional Services</h4>
          <p class="p-2">
            <br/> 
            <br/> 
            <br/> 
            <br/> 
            <br/> 
          </p>
        </div>
      </div>
        </div>
    </div>
  </section>
  <!-- SERVICES SECTION CLOSE -->

  


  </body>
</html>

    测试.css 

    @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body {
    background: hsl(233, 47%, 96%);
    font-family: 'Poppins', sans-serif;
}

hr {
    border: 1.5px solid hsl(216, 90%, 44%)
}

.crd {
    background: hsl(233, 47%, 96%);
    transition: all;
}

.crd:hover {
    background: hsl(216, 90%, 44%);
    color: #fff;
    transition: 0.5s;
}

.card img {
    margin: auto;
    
}

#rounded_circle {
    width: 76px;
    aspect-ratio: 1;
    background-color: hsl(0, 0%, 75%);
}

footer a {
    color: hsl(0, 0%, 100%);
}

#footer {
    color: hsl(0, 0%, 100%);
}

#copyright {
    border-top: 1px solid hsl(0, 0%, 20%) ;
}

.c-item {
    height: 480px;
}

.c-img {
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6);
}

#team-img {
    height: 100%;
    object-fit: cover;
}

@media (min-width: 576px) {
    .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}


    @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body {
    background: hsl(233, 47%, 96%);
    font-family: 'Poppins', sans-serif;
}

hr {
    border: 1.5px solid hsl(216, 90%, 44%)
}

.crd {
    background: hsl(233, 47%, 96%);
    transition: all;
}

.crd:hover {
    background: hsl(216, 90%, 44%);
    color: #fff;
    transition: 0.5s;
}

.card img {
    margin: auto;
    
}

#rounded_circle {
    width: 76px;
    aspect-ratio: 1;
    background-color: hsl(0, 0%, 75%);
}

footer a {
    color: hsl(0, 0%, 100%);
}

#footer {
    color: hsl(0, 0%, 100%);
}

#copyright {
    border-top: 1px solid hsl(0, 0%, 20%) ;
}

.c-item {
    height: 480px;
}

.c-img {
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6);
}

#team-img {
    height: 100%;
    object-fit: cover;
}

@media (min-width: 576px) {
    .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}
    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Home |</title>

<meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />

<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="../css/index.css" />
<link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Default"
    disabled
          href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
        >
        <link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Web Awesome"

          href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
        >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css"
          >
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>

  <!-- SERVICES SECTION START -->
  <section>
    <div class="container">
        <div class="row py-5">
            <h2 class="display-6 mb-4">Our Services</h2>
        <div class="col-lg-4 col-md-6">
          <a href="/about.html" class="nav-link"></a>
          <div class="card text-center p-4 mb-2 crd">
            <i class="fa-solid fa-camera-cctv fa-3x"></i>
            <h4>CCTV Services</h4>
            <p class="p-2">
              <b>CCTV Services</b> are an essential component of any business. CCTV provides real-time monitoring of multiple locations; the security they supply is indispensable, allowing businesses to have peace of mind knowing that...
            </p>
          </div>
        </div>
        <!-- <div class="col-lg-4 col-md-6">
          <div class="card text-center p-4 mb-2">
            <i class="fa-solid fa-sign-hanging fa-3x"></i>
            <h4>Digital Signage</h4>
            <p class="p-2">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
              voluptatum, voluptate, quibusdam, quia voluptas quod quos
              exercitationem quae voluptatibus doloribus quidem. Quisquam
            </p>
          </div>
        </div> -->
        <div class="col-lg-4 col-md-6">
          <div class="card text-center p-4 mb-2 crd">
            <i class="fa-solid fa-database fa-3x"></i>
            <h4>Datacenter Support</h4>
            <p class="p-2">
              <b>Datacenters</b> are the foundation of many modern businesses, providing the infrastructure and resources necessary to save, process, and dispense data. They produce an off-premises location to secure and back up your business's data.
            </p>
          </div>
        </div>
        <div class="col-lg-4 col-md-6">
          <div class="card text-center p-4 mb-2 crd">
            <i class="fa-solid fa-sign-hanging fa-3x"></i>
            <h4>Digital Signage</h4>
            <p class="p-2">
              <b>Digital Signage</b> has grown rapidly over the last two decades well beyond just a flashy trend for big businesses in the realm of marketing and advertising, and the general dissemination of information. Now it has become the expected strategy.
            </p>
          </div>
        </div>
        <div class="col-lg-4 col-md-6">
          <div class="card text-center p-4 mb-2 crd">
            <i class="fa-solid fa-headset fa-3x"></i>
            <h4>General Support</h4>
            <p class="p-2">
              <b>General Support</b> is a crucial element to every modern business; providing essential support to businesses of all shapes and sizes. The focal point of General Support is to... 
            </p>
          </div>
        </div>
        <div class="col-lg-4 col-md-6">
          <div class="card text-center p-4 mb-2 crd">
            <i class="fa-solid fa-server fa-3x"></i>
            <h4>Network Support</h4>
            <p class="p-2">
              <b>Network Support</b> includes making sure all networking hardware, software, and other related dependencies are both up to date and functioning properly. Monitoring the network for potential problems...
            </p>
          </div>
              </div>
      <div class="col-lg-4 col-md-6">
        <div class="card text-center p-4 mb-2 crd">
          <i class="fa-solid fa-bars fa-3x"></i>
          <h4>Additional Services</h4>
          <p class="p-2">
            <br/> 
            <br/> 
            <br/> 
            <br/> 
            <br/> 
          </p>
        </div>
      </div>
        </div>
    </div>
  </section>
  <!-- SERVICES SECTION CLOSE -->

  


  </body>
</html>
    2 回复  |  直到 10 月前
        1
  •  2
  •   Guillaume Gentil    10 月前

    Bootstrap为您提供了一个可爱的解决方案 拉伸连杆 班你只需要在你的卡片上添加一个这个类的链接,卡片就会突然变成可点击的。 

    <div class="col-lg-4 col-md-6">
  <div class="card text-center p-4 mb-2 crd">
    <i class="fa-solid fa-camera-cctv fa-3x"></i>
    <h4>CCTV Services</h4>
    <p class="p-2">
      <b>CCTV Services</b> are an essential component
          of any business. CCTV provides real-time
          monitoring of multiple locations; the security
          they supply is indispensable, allowing
          businesses to have peace of mind knowing that...
    </p>
    <a href="/about.html" class="stretched-link"></a>
  </div>
</div>

    来源: https://getbootstrap.com/docs/4.4/utilities/stretched-link/

        2
  •  0
  •   Muzammil Ghani    10 月前 
       <div class="col-lg-4 col-md-6">
      <a href="/about.html" class="nav-link" style="pointer:cursor">
        <div class="card text-center p-4 mb-2 crd">
          <i class="fa-solid fa-camera-cctv fa-3x"></i>
          <h4>CCTV Services</h4>
          <p class="p-2">
            <b>CCTV Services</b> are an essential component of any business. CCTV provides real-time monitoring of
            multiple locations; the security they supply is indispensable, allowing businesses to have peace of mind
            knowing that...
          </p>
        </div>
      </a>
    </div>
    推荐文章
    Miguel Mesquita Alfaiate  ·  将nuget包从项目绑定到DLL中,以允许在第三方项目中重用
    9 月前
    kaiselwyvrn  ·  我无法打开Visual Studio项目
    11 月前
    David Thielen  ·  ReSharper是否有一个重构程序来消除结束html标记
    11 月前
    NAM3L3SSRJ  ·  如何在C语言中创建一个方法或函数,在超市销售时减少数据库中的库存
    1 年前
    TheMixy  ·  Visual Studio-将文本粘贴到cshtml中会删除文本
    2 年前
    LeeJunYoung  ·  Visual Studio 2022发布菜单中没有ftp菜单。如何通过ftp发布?
    2 年前
    Cobra_Fast  ·  如何查找不必要的空运算符?
    2 年前
    Josep Ramon Ribera  ·  如何在WPF(C#)中包含条形图?
    2 年前
    Tajca-sus3  ·  自动完成在新的Visual Studio 2022 For UNITY中不起作用
    2 年前
    lolorekkk  ·  面板插入。NET WinForm
    2 年前
    关于   移动版   ·   今天看啥   ·   Python社区   ·   Code   ·   link之家   ·   卧龙搜索   ·  
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号