Bootstrap 简明教程

Bootstrap - Stretched link

本章讨论了 Bootstrap 提供的 .stretched-link 类。

This chapter discusses about the class .stretched-link provided by Bootstrap.

Bootstrap 中的 .stretched-link 类用于创建链接，该链接可以延伸以填充整个父容器。

The .stretched-link class in Bootstrap is used to create a link that stretches to fill the entire parent container.

This class can be used on any element that can contain a link, such as a <div> or <a> element, to make the entire element clickable and act as a link.
Any element with position:relative and contains a link with the .stretched-link class is clickable.
The .stretched-link class cannot be mixed with most table elements.
This class can be safely added to cards as they have position:relative by default in Bootstrap.
Using stretched links with multiple links and tap targets is not advisable.

Card with stretched link

在您希望使内容的整个部分都可单击（例如卡片或列表项）的情况下，这一点很有用。

This is useful for cases where you want to make an entire section of content clickable, such as a card or a list item.

让我们在卡片中查阅一下 .stretched-link 类的用法示例：

Let’s see an example on the usage of the .stretched-link class in a card:

Example

可以使用 编辑和运行 选项编辑并尝试运行此代码。

You can edit and try running this code using the *Edit & Run * option.

<!DOCTYPE html>
<html lang="en">
    <head>
      <title>Bootstrap - Card</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h4>Stretched link in a card</h4>
        <div class="card" style="width: 20rem;">
          <img src="/bootstrap/images/tutimg.png" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Stretched link in a card</h5>
            <p class="card-text">Here is an example that shows the entire card as a link. This is because of the .stretched-link class of Bootstrap.</p>
            <a href="#" class="btn btn-primary stretched-link">View</a>
          </div>
        </div>
    </body>
</html>

当你使用自定义组件的时候，如果没有默认 position: relative ，你需要添加 .position-relative 类来防止链接延伸到父元素之外。

You need to add the .position-relative class to prevent the link from stretching outside the parent element, when custom components do not have position: relative by default.

让我们看一个使用 .position-relative 类的示例：

Let’s see an example on the usage of the .position-relative class:

Example

可以使用 编辑和运行 选项编辑并尝试运行此代码。

You can edit and try running this code using the *Edit & Run * option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Helper - Stretched link</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
      <h4>Custom component with stretched link</h4>
      <div class="d-flex position-relative">
        <img src="/bootstrap/images/tutimg.png" class="flex-shrink-0 me-3" alt="...">
        <div>
          <h5 class="mt-0">Custom component with stretched link using .position-relative</h5>
          <p>Here is an example showing the use of .position-relative class in a component that shows a stretched link usage.</p>
          <a href="#" class="stretched-link">View</a>
        </div>
      </div>
  </body>
</html>

让我们看另一个使用 .position-relative 类的示例：

Let’s see one more example of the usage of the .position-relative class:

Example

可以使用 编辑和运行 选项编辑并尝试运行此代码。

You can edit and try running this code using the *Edit & Run * option.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Helper - Stretched link</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
      <h4>Columns with stretched link</h4>
      <div class="row g-0 bg-body-secondary position-relative">
        <div class="col-md-4 mb-md-0 p-md-4">
          <img src="/bootstrap/images/tutimg.png" class="w-100" alt="...">
        </div>
        <div class="col-md-4 p-4 ps-md-0">
          <h5 class="mt-0">Columns with stretched link</h5>
          <p>Another example of strecthed link with .position-relative on this other custom component. You can use it here to give the component a bit of body and size.</p>
          <a href="#" class="stretched-link">View</a>
        </div>
      </div>
  </body>
</html>