diff options
| author | Mark Otto <otto@github.com> | 2018-12-22 08:10:40 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2018-12-22 08:10:40 +0300 |
| commit | f0e5cc3f417191f5823f426b1ae071c78f427475 (patch) | |
| tree | eefdf5c7f375fe70f30c8fe9e412721f00db02e3 /site | |
| parent | 236c7803cba37501580755dfe7a020fcf6aa0565 (diff) | |
Add a notes about multiple links/targets, remove multiple link example
Diffstat (limited to 'site')
| -rw-r--r-- | site/docs/4.1/utilities/stretched-link.md | 24 |
1 files 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 %} <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: |