rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-20 17:54:23 +01:00
Code Issues Actions Packages Releases Activity

Add a notes about multiple links/targets, remove multiple link example

Browse Source
This commit is contained in:
Mark Otto 2018-12-21 21:10:40 -08:00 committed by GitHub
parent 236c7803cb
commit f0e5cc3f41
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 2 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
site/docs/4.1/utilities/stretched-link.md
View File

@ -9,6 +9,8 @@ Add `.stretched-link` to a link to make it's [containing block](https://develope
Cards have `position: relative` by default in Bootstrap, so in this case you can safely add the `.stretched-link` class to a link in the card without any other HTML changes.
Multiple links and tap targets are not recommended with stretched links. However, some `position` and `z-index` styles can help should this be required.
{% capture example %}
<div class="card" style="width: 18rem;">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text=" " title="Card image cap" %}
@ -51,28 +53,6 @@ Columns are `position: relative` by default, so clickable columns only require t
{% endcapture %}
{% include example.html content=example %}
Multiple links can be added to elements with a stretched link, but their `z-index` must be increased to be become clickable.
{% capture example %}
<div class="card" style="width: 18rem;">
{% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text=" " title="Card image cap" %}
<div class="card-body">
<h5 class="card-title">Card with multiple links</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">
<a href="#" class="stretched-link">The whole card will be linked to this link</a>
</p>
<p class="card-text">
<a href="#" class="text-danger">This link will be unclickable, because the previous link is stretched over this link</a>
</p>
<p class="card-text">
<a href="#" style="position: relative; z-index: 2;" class="text-success">This link will be clickable because <code>position: relative</code> is added and the z-index is higher than the z-index of the <code>::after</code> pseudo element of the stretched link</a>
</p>
</div>
</div>
{% endcapture %}
{% include example.html content=example %}
## Identifying the containing block
If the stretched link doesn't seem to work, the [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block) will probably be the cause. The following CSS properties will make an element the containing block: