巨大的空白 space 在底部 Bootstrap 4 在 Chrome
Huge blank space at the bottom in Bootstrap 4 in Chrome
我正在开发一个带有 Bootstrap 4 的 WebApp，即 Android[=91= 上的 运行 ] 在 WebView 中作为本地页面。在某些情况下，我在页脚后得到一个巨大的空白 space，我不知道为什么会这样：
我的 WebApp 包含 3 个部分：
- 旋转木马。
- 带有两 (2) 张卡片的手风琴。
- 页脚。
这是我的例子 HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="file:///android_asset/css/bootstrap.min.css">
<link rel="stylesheet" href="file:///android_asset/css/index.css" />
<script src="file:///android_asset/js/jquery.min.js"></script>
<script src="file:///android_asset/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner" id="carouselItems">
<div class="item active">
<img src="1.jpg" alt="1">
</div>
</div>
</div>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Ingredientes
</a>
</div>
<div id="collapseOne" class="collapse show">
<div class="card-body">
<ul id="listIngredients">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Nunc dignissim risus id metus.</li>
<li>Cras ornare tristique elit.</li>
<li>Vivamus vestibulum ntulla nec ante.</li>
<li>Praesent placerat risus quis eros.</li>
<li>Fusce pellentesque suscipit nibh.</li>
<li>Integer vitae libero ac risus egestas placerat.</li>
<li>Vestibulum commodo felis quis tortor.</li>
<li>Ut aliquam sollicitudin leo.</li>
<li>Cras iaculis ultricies nulla.</li>
<li>Donec quis dui at dolor tempor interdum.</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Pasos
</a>
</div>
<div id="collapseTwo" class="collapse">
<div class="card-body">
<table class="table">
<tr>
<th><span>Porciones</span></th>
<th><span>Preparación</span></th>
<th><span>Cocción</span></th>
</tr>
<tr>
<td><span id="portions">1</span></td>
<td><span id="time1">1 min</span></td>
<td><span id="time2">10 min</span></td>
</tr>
</table>
<p id="txtRecipe">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec mattis sem. Ut varius, arcu nec egestas mollis, tellus nibh lobortis eros, quis mollis velit nunc nec diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla non odio aliquam, sodales felis tincidunt, ultrices elit. Cras mattis fringilla erat sit amet venenatis. Curabitur venenatis aliquam risus et pellentesque. Proin volutpat ultricies erat, vitae pharetra sem blandit sed. Proin nisi mi, sodales eget lacinia eu, vehicula id est. Aliquam in lectus euismod, blandit nulla ultricies, maximus nisl. Praesent mattis ultrices ex et tristique. Integer sit amet arcu non mi rutrum fringilla et ac dui.<br />Duis dignissim rhoncus leo, vel pulvinar magna facilisis non. Integer lectus lorem, laoreet vel posuere vitae, tincidunt dapibus magna. Nam feugiat enim viverra accumsan rhoncus. Donec id nibh vel massa tristique pulvinar. Duis id orci in elit venenatis porta a vitae ipsum. Duis venenatis fringilla malesuada. Phasellus eget dui urna. Maecenas id mauris id odio facilisis imperdiet vulputate in nisi. Proin ultricies malesuada pellentesque. Integer blandit est et eros pharetra facilisis. Sed vitae augue augue. In hac habitasse platea dictumst.<br />Maecenas vitae ultrices dolor. Fusce placerat fringilla turpis a consequat. In porttitor consequat eleifend. Duis ante quam, congue id egestas id, vulputate eget libero. Pellentesque lobortis fermentum leo, sed bibendum ligula dapibus at. Aliquam risus mi, hendrerit sit amet enim sit amet, cursus aliquam quam. Integer dictum tincidunt augue id posuere. Donec urna neque, aliquam sit amet imperdiet eu, pellentesque vitae magna. Nulla vel ante magna. Curabitur cursus sagittis sapien ut luctus.<br />Integer gravida erat ut ipsum aliquet ultrices. Praesent blandit sagittis nunc, quis iaculis sem luctus ut. Aenean pellentesque vitae augue sed commodo. Nullam nunc metus, rutrum et porttitor nec, mattis at quam. Pellentesque tincidunt sollicitudin augue id facilisis. Ut nec ante justo. Pellentesque eget consectetur nisl, id semper massa. Vivamus accumsan dignissim consequat. Cras commodo imperdiet libero, ac fringilla felis pretium aliquet. Cras sodales scelerisque erat, vitae iaculis nisl ornare vitae. Mauris sit amet erat ac augue tempor volutpat eget laoreet justo. In hac habitasse platea dictumst. Donec quam sem, vulputate vitae pellentesque ac, pellentesque euismod tellus. Nullam felis enim, semper non faucibus malesuada, tincidunt vitae ligula. Vestibulum vitae massa id eros dapibus feugiat.<br />Aliquam id rutrum lacus. Nam lacus erat, sagittis in neque vel, placerat accumsan risus. Nulla facilisi. Etiam blandit est ac fermentum vestibulum. Morbi accumsan lectus pellentesque, cursus dolor nec, lobortis risus. Ut sem arcu, tempor sit amet nibh faucibus, hendrerit volutpat arcu. Donec non sagittis nulla, in varius augue.</p>
</div>
</div>
</div>
</div>
<div class="footer">
<a id="copyright" href="https://www.google.com">© Leer la receta original</a>
</div>
</div>
</body>
</html>
CSS(index.css):
abbr {
text-decoration: underline;
}
th {
vertical-align: middle
}
th, td {
text-align: center
}
.footer {
width: 100%;
text-align: center;
}
.timer {
height: 12px;
}
.carousel-caption {
background-color: rgba(0,0,0,.5);
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
#txtRecipe {
text-align: justify;
padding-right: 12px
}
另外，这是我运行的Bootstrap版本（4.0.0，最新的）：
https://github.com/twbs/bootstrap/releases/download/v4.0.0/bootstrap-4.0.0-dist.zip
这是我使用的 jQuery 版本 (1.10.2):
https://code.jquery.com/jquery-1.10.2.min.js
我用它来给段落添加信息，Carousel，一个URL到link，填写一行table和无序列表。
这是我的 JS 的一部分：
$(function () {
$('#accordion .collapse').collapse('show');
});
此外，我注意到这个问题是随机发生的，而且我不是唯一遇到过的人，我发现了一个类似的问题也没有答案：
此外，我测试了随机 CSSs，例如：
html, body {
height: 100%important!
}
然而，什么都没有改变。此外，如果它对任何人有用，我正在这两种设备中进行测试：
- 具有 API 26（Pixel 2）的 Android 模拟器。
- A Huawei Y7 with Android 7 默认浏览器：Yandex Browser.
最后，如果有人有这个疑问：
If Bootstrap 4 doesn't work for you, why don't you use Bootstrap 3
instead?
我试过了，但没有用，因为手风琴和卡片的组合。 Cards CSS 完全坏了，Accordion 没有按预期工作，例如，第一张 Card 无法关闭。
有谁知道这个巨大空白的原因是什么 space？感谢您宝贵的时间和帮助。
更新：
能够在 Chrome 上调试后，我发现了这个错误，例如：
正常情况下你是这样看的：
但在异常情况下会出现这种情况：
我认为错误是一旦手风琴被扩展，因为它创建了一个 space，但它没有被删除。
我在 Bootstrap 4:
中找到了解决这个问题的方法
您必须在 容器 中设置所有信息，然后每个部分创建 行 个个体。
我从这里想到了一个主意：
Bootstrap panel collapse creating gaps
这是我的最终解决方案：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="file:///android_asset/css/bootstrap.min.css">
<link rel="stylesheet" href="file:///android_asset/css/index.css" />
<script src="file:///android_asset/js/jquery.min.js"></script>
<script src="file:///android_asset/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner" id="carouselItems">
<div class="item active">
<img src="1.jpg" alt="1">
</div>
</div>
</div>
</div>
<div class="row">
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Ingredientes
</a>
</div>
<div id="collapseOne" class="collapse show">
<div class="card-body">
<ul id="listIngredients">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Nunc dignissim risus id metus.</li>
<li>Cras ornare tristique elit.</li>
<li>Vivamus vestibulum ntulla nec ante.</li>
<li>Praesent placerat risus quis eros.</li>
<li>Fusce pellentesque suscipit nibh.</li>
<li>Integer vitae libero ac risus egestas placerat.</li>
<li>Vestibulum commodo felis quis tortor.</li>
<li>Ut aliquam sollicitudin leo.</li>
<li>Cras iaculis ultricies nulla.</li>
<li>Donec quis dui at dolor tempor interdum.</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Pasos
</a>
</div>
<div id="collapseTwo" class="collapse">
<div class="card-body">
<table class="table">
<tr>
<th><span>Porciones</span></th>
<th><span>Preparación</span></th>
<th><span>Cocción</span></th>
</tr>
<tr>
<td><span id="portions">1</span></td>
<td><span id="time1">1 min</span></td>
<td><span id="time2">10 min</span></td>
</tr>
</table>
<p id="txtRecipe">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec mattis sem. Ut varius, arcu nec egestas mollis, tellus nibh lobortis eros, quis mollis velit nunc nec diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla non odio aliquam, sodales felis tincidunt, ultrices elit. Cras mattis fringilla erat sit amet venenatis. Curabitur venenatis aliquam risus et pellentesque. Proin volutpat ultricies erat, vitae pharetra sem blandit sed. Proin nisi mi, sodales eget lacinia eu, vehicula id est. Aliquam in lectus euismod, blandit nulla ultricies, maximus nisl. Praesent mattis ultrices ex et tristique. Integer sit amet arcu non mi rutrum fringilla et ac dui.<br />Duis dignissim rhoncus leo, vel pulvinar magna facilisis non. Integer lectus lorem, laoreet vel posuere vitae, tincidunt dapibus magna. Nam feugiat enim viverra accumsan rhoncus. Donec id nibh vel massa tristique pulvinar. Duis id orci in elit venenatis porta a vitae ipsum. Duis venenatis fringilla malesuada. Phasellus eget dui urna. Maecenas id mauris id odio facilisis imperdiet vulputate in nisi. Proin ultricies malesuada pellentesque. Integer blandit est et eros pharetra facilisis. Sed vitae augue augue. In hac habitasse platea dictumst.<br />Maecenas vitae ultrices dolor. Fusce placerat fringilla turpis a consequat. In porttitor consequat eleifend. Duis ante quam, congue id egestas id, vulputate eget libero. Pellentesque lobortis fermentum leo, sed bibendum ligula dapibus at. Aliquam risus mi, hendrerit sit amet enim sit amet, cursus aliquam quam. Integer dictum tincidunt augue id posuere. Donec urna neque, aliquam sit amet imperdiet eu, pellentesque vitae magna. Nulla vel ante magna. Curabitur cursus sagittis sapien ut luctus.<br />Integer gravida erat ut ipsum aliquet ultrices. Praesent blandit sagittis nunc, quis iaculis sem luctus ut. Aenean pellentesque vitae augue sed commodo. Nullam nunc metus, rutrum et porttitor nec, mattis at quam. Pellentesque tincidunt sollicitudin augue id facilisis. Ut nec ante justo. Pellentesque eget consectetur nisl, id semper massa. Vivamus accumsan dignissim consequat. Cras commodo imperdiet libero, ac fringilla felis pretium aliquet. Cras sodales scelerisque erat, vitae iaculis nisl ornare vitae. Mauris sit amet erat ac augue tempor volutpat eget laoreet justo. In hac habitasse platea dictumst. Donec quam sem, vulputate vitae pellentesque ac, pellentesque euismod tellus. Nullam felis enim, semper non faucibus malesuada, tincidunt vitae ligula. Vestibulum vitae massa id eros dapibus feugiat.<br />Aliquam id rutrum lacus. Nam lacus erat, sagittis in neque vel, placerat accumsan risus. Nulla facilisi. Etiam blandit est ac fermentum vestibulum. Morbi accumsan lectus pellentesque, cursus dolor nec, lobortis risus. Ut sem arcu, tempor sit amet nibh faucibus, hendrerit volutpat arcu. Donec non sagittis nulla, in varius augue.</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="footer">
<a id="copyright" href="https://www.google.com">© Leer la receta original</a>
</div>
</div>
</div>
</body>
</html>
我正在开发一个带有 Bootstrap 4 的 WebApp，即 Android[=91= 上的 运行 ] 在 WebView 中作为本地页面。在某些情况下，我在页脚后得到一个巨大的空白 space，我不知道为什么会这样：
我的 WebApp 包含 3 个部分：
- 旋转木马。
- 带有两 (2) 张卡片的手风琴。
- 页脚。
这是我的例子 HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="file:///android_asset/css/bootstrap.min.css">
<link rel="stylesheet" href="file:///android_asset/css/index.css" />
<script src="file:///android_asset/js/jquery.min.js"></script>
<script src="file:///android_asset/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner" id="carouselItems">
<div class="item active">
<img src="1.jpg" alt="1">
</div>
</div>
</div>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Ingredientes
</a>
</div>
<div id="collapseOne" class="collapse show">
<div class="card-body">
<ul id="listIngredients">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Nunc dignissim risus id metus.</li>
<li>Cras ornare tristique elit.</li>
<li>Vivamus vestibulum ntulla nec ante.</li>
<li>Praesent placerat risus quis eros.</li>
<li>Fusce pellentesque suscipit nibh.</li>
<li>Integer vitae libero ac risus egestas placerat.</li>
<li>Vestibulum commodo felis quis tortor.</li>
<li>Ut aliquam sollicitudin leo.</li>
<li>Cras iaculis ultricies nulla.</li>
<li>Donec quis dui at dolor tempor interdum.</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Pasos
</a>
</div>
<div id="collapseTwo" class="collapse">
<div class="card-body">
<table class="table">
<tr>
<th><span>Porciones</span></th>
<th><span>Preparación</span></th>
<th><span>Cocción</span></th>
</tr>
<tr>
<td><span id="portions">1</span></td>
<td><span id="time1">1 min</span></td>
<td><span id="time2">10 min</span></td>
</tr>
</table>
<p id="txtRecipe">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec mattis sem. Ut varius, arcu nec egestas mollis, tellus nibh lobortis eros, quis mollis velit nunc nec diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla non odio aliquam, sodales felis tincidunt, ultrices elit. Cras mattis fringilla erat sit amet venenatis. Curabitur venenatis aliquam risus et pellentesque. Proin volutpat ultricies erat, vitae pharetra sem blandit sed. Proin nisi mi, sodales eget lacinia eu, vehicula id est. Aliquam in lectus euismod, blandit nulla ultricies, maximus nisl. Praesent mattis ultrices ex et tristique. Integer sit amet arcu non mi rutrum fringilla et ac dui.<br />Duis dignissim rhoncus leo, vel pulvinar magna facilisis non. Integer lectus lorem, laoreet vel posuere vitae, tincidunt dapibus magna. Nam feugiat enim viverra accumsan rhoncus. Donec id nibh vel massa tristique pulvinar. Duis id orci in elit venenatis porta a vitae ipsum. Duis venenatis fringilla malesuada. Phasellus eget dui urna. Maecenas id mauris id odio facilisis imperdiet vulputate in nisi. Proin ultricies malesuada pellentesque. Integer blandit est et eros pharetra facilisis. Sed vitae augue augue. In hac habitasse platea dictumst.<br />Maecenas vitae ultrices dolor. Fusce placerat fringilla turpis a consequat. In porttitor consequat eleifend. Duis ante quam, congue id egestas id, vulputate eget libero. Pellentesque lobortis fermentum leo, sed bibendum ligula dapibus at. Aliquam risus mi, hendrerit sit amet enim sit amet, cursus aliquam quam. Integer dictum tincidunt augue id posuere. Donec urna neque, aliquam sit amet imperdiet eu, pellentesque vitae magna. Nulla vel ante magna. Curabitur cursus sagittis sapien ut luctus.<br />Integer gravida erat ut ipsum aliquet ultrices. Praesent blandit sagittis nunc, quis iaculis sem luctus ut. Aenean pellentesque vitae augue sed commodo. Nullam nunc metus, rutrum et porttitor nec, mattis at quam. Pellentesque tincidunt sollicitudin augue id facilisis. Ut nec ante justo. Pellentesque eget consectetur nisl, id semper massa. Vivamus accumsan dignissim consequat. Cras commodo imperdiet libero, ac fringilla felis pretium aliquet. Cras sodales scelerisque erat, vitae iaculis nisl ornare vitae. Mauris sit amet erat ac augue tempor volutpat eget laoreet justo. In hac habitasse platea dictumst. Donec quam sem, vulputate vitae pellentesque ac, pellentesque euismod tellus. Nullam felis enim, semper non faucibus malesuada, tincidunt vitae ligula. Vestibulum vitae massa id eros dapibus feugiat.<br />Aliquam id rutrum lacus. Nam lacus erat, sagittis in neque vel, placerat accumsan risus. Nulla facilisi. Etiam blandit est ac fermentum vestibulum. Morbi accumsan lectus pellentesque, cursus dolor nec, lobortis risus. Ut sem arcu, tempor sit amet nibh faucibus, hendrerit volutpat arcu. Donec non sagittis nulla, in varius augue.</p>
</div>
</div>
</div>
</div>
<div class="footer">
<a id="copyright" href="https://www.google.com">© Leer la receta original</a>
</div>
</div>
</body>
</html>
CSS(index.css):
abbr {
text-decoration: underline;
}
th {
vertical-align: middle
}
th, td {
text-align: center
}
.footer {
width: 100%;
text-align: center;
}
.timer {
height: 12px;
}
.carousel-caption {
background-color: rgba(0,0,0,.5);
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
#txtRecipe {
text-align: justify;
padding-right: 12px
}
另外，这是我运行的Bootstrap版本（4.0.0，最新的）：
https://github.com/twbs/bootstrap/releases/download/v4.0.0/bootstrap-4.0.0-dist.zip
这是我使用的 jQuery 版本 (1.10.2):
https://code.jquery.com/jquery-1.10.2.min.js
我用它来给段落添加信息，Carousel，一个URL到link，填写一行table和无序列表。
这是我的 JS 的一部分：
$(function () {
$('#accordion .collapse').collapse('show');
});
此外，我注意到这个问题是随机发生的，而且我不是唯一遇到过的人，我发现了一个类似的问题也没有答案：
此外，我测试了随机 CSSs，例如：
html, body {
height: 100%important!
}
然而，什么都没有改变。此外，如果它对任何人有用，我正在这两种设备中进行测试：
- 具有 API 26（Pixel 2）的 Android 模拟器。
- A Huawei Y7 with Android 7 默认浏览器：Yandex Browser.
最后，如果有人有这个疑问：
If Bootstrap 4 doesn't work for you, why don't you use Bootstrap 3 instead?
我试过了，但没有用，因为手风琴和卡片的组合。 Cards CSS 完全坏了，Accordion 没有按预期工作，例如，第一张 Card 无法关闭。
有谁知道这个巨大空白的原因是什么 space？感谢您宝贵的时间和帮助。
更新：
能够在 Chrome 上调试后，我发现了这个错误，例如：
正常情况下你是这样看的：
但在异常情况下会出现这种情况：
我认为错误是一旦手风琴被扩展，因为它创建了一个 space，但它没有被删除。
我在 Bootstrap 4:
中找到了解决这个问题的方法您必须在 容器 中设置所有信息，然后每个部分创建 行 个个体。
我从这里想到了一个主意：
Bootstrap panel collapse creating gaps
这是我的最终解决方案：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="file:///android_asset/css/bootstrap.min.css">
<link rel="stylesheet" href="file:///android_asset/css/index.css" />
<script src="file:///android_asset/js/jquery.min.js"></script>
<script src="file:///android_asset/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner" id="carouselItems">
<div class="item active">
<img src="1.jpg" alt="1">
</div>
</div>
</div>
</div>
<div class="row">
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Ingredientes
</a>
</div>
<div id="collapseOne" class="collapse show">
<div class="card-body">
<ul id="listIngredients">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Nunc dignissim risus id metus.</li>
<li>Cras ornare tristique elit.</li>
<li>Vivamus vestibulum ntulla nec ante.</li>
<li>Praesent placerat risus quis eros.</li>
<li>Fusce pellentesque suscipit nibh.</li>
<li>Integer vitae libero ac risus egestas placerat.</li>
<li>Vestibulum commodo felis quis tortor.</li>
<li>Ut aliquam sollicitudin leo.</li>
<li>Cras iaculis ultricies nulla.</li>
<li>Donec quis dui at dolor tempor interdum.</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Pasos
</a>
</div>
<div id="collapseTwo" class="collapse">
<div class="card-body">
<table class="table">
<tr>
<th><span>Porciones</span></th>
<th><span>Preparación</span></th>
<th><span>Cocción</span></th>
</tr>
<tr>
<td><span id="portions">1</span></td>
<td><span id="time1">1 min</span></td>
<td><span id="time2">10 min</span></td>
</tr>
</table>
<p id="txtRecipe">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec mattis sem. Ut varius, arcu nec egestas mollis, tellus nibh lobortis eros, quis mollis velit nunc nec diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla non odio aliquam, sodales felis tincidunt, ultrices elit. Cras mattis fringilla erat sit amet venenatis. Curabitur venenatis aliquam risus et pellentesque. Proin volutpat ultricies erat, vitae pharetra sem blandit sed. Proin nisi mi, sodales eget lacinia eu, vehicula id est. Aliquam in lectus euismod, blandit nulla ultricies, maximus nisl. Praesent mattis ultrices ex et tristique. Integer sit amet arcu non mi rutrum fringilla et ac dui.<br />Duis dignissim rhoncus leo, vel pulvinar magna facilisis non. Integer lectus lorem, laoreet vel posuere vitae, tincidunt dapibus magna. Nam feugiat enim viverra accumsan rhoncus. Donec id nibh vel massa tristique pulvinar. Duis id orci in elit venenatis porta a vitae ipsum. Duis venenatis fringilla malesuada. Phasellus eget dui urna. Maecenas id mauris id odio facilisis imperdiet vulputate in nisi. Proin ultricies malesuada pellentesque. Integer blandit est et eros pharetra facilisis. Sed vitae augue augue. In hac habitasse platea dictumst.<br />Maecenas vitae ultrices dolor. Fusce placerat fringilla turpis a consequat. In porttitor consequat eleifend. Duis ante quam, congue id egestas id, vulputate eget libero. Pellentesque lobortis fermentum leo, sed bibendum ligula dapibus at. Aliquam risus mi, hendrerit sit amet enim sit amet, cursus aliquam quam. Integer dictum tincidunt augue id posuere. Donec urna neque, aliquam sit amet imperdiet eu, pellentesque vitae magna. Nulla vel ante magna. Curabitur cursus sagittis sapien ut luctus.<br />Integer gravida erat ut ipsum aliquet ultrices. Praesent blandit sagittis nunc, quis iaculis sem luctus ut. Aenean pellentesque vitae augue sed commodo. Nullam nunc metus, rutrum et porttitor nec, mattis at quam. Pellentesque tincidunt sollicitudin augue id facilisis. Ut nec ante justo. Pellentesque eget consectetur nisl, id semper massa. Vivamus accumsan dignissim consequat. Cras commodo imperdiet libero, ac fringilla felis pretium aliquet. Cras sodales scelerisque erat, vitae iaculis nisl ornare vitae. Mauris sit amet erat ac augue tempor volutpat eget laoreet justo. In hac habitasse platea dictumst. Donec quam sem, vulputate vitae pellentesque ac, pellentesque euismod tellus. Nullam felis enim, semper non faucibus malesuada, tincidunt vitae ligula. Vestibulum vitae massa id eros dapibus feugiat.<br />Aliquam id rutrum lacus. Nam lacus erat, sagittis in neque vel, placerat accumsan risus. Nulla facilisi. Etiam blandit est ac fermentum vestibulum. Morbi accumsan lectus pellentesque, cursus dolor nec, lobortis risus. Ut sem arcu, tempor sit amet nibh faucibus, hendrerit volutpat arcu. Donec non sagittis nulla, in varius augue.</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="footer">
<a id="copyright" href="https://www.google.com">© Leer la receta original</a>
</div>
</div>
</div>
</body>
</html>