From f0e5cc3f417191f5823f426b1ae071c78f427475 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 21 Dec 2018 21:10:40 -0800 Subject: [PATCH] Add a notes about multiple links/targets, remove multiple link example --- site/docs/4.1/utilities/stretched-link.md | 24 ++--------------------- 1 file changed, 2 insertions(+), 22 deletions(-) diff --git a/site/docs/4.1/utilities/stretched-link.md b/site/docs/4.1/utilities/stretched-link.md index c0c8940e10..5347307b53 100644 --- a/site/docs/4.1/utilities/stretched-link.md +++ b/site/docs/4.1/utilities/stretched-link.md @@ -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 %}
{% 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 %} -
- {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text=" " title="Card image cap" %} -
-
Card with multiple links
-

Some quick example text to build on the card title and make up the bulk of the card's content.

-

- The whole card will be linked to this link -

-

- This link will be unclickable, because the previous link is stretched over this link -

-

- This link will be clickable because position: relative is added and the z-index is higher than the z-index of the ::after pseudo element of the stretched link -

-
-
-{% 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: