我目前正在为一个 friend 开发一个页面，目标是让沙丁鱼 jar 头作为一种菜单来显示一些细节。
在使用标签之前，它工作正常，如图所示:
使用选项卡后，我丢失了原来的布局...有人知道如何解决这个问题吗？我确定我的问题出在我的 CSS 中。
使用代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mar de Sardinhas</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i" rel="stylesheet">
<!-- scripts de visivel / invisivel
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
css para styling -->
<style type="text/css">
.off {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
.on {
}
.position{
position: relative;
bottom: -30%;
transition: 0.3s;
}
.position:hover {
position: relative;
bottom: 0%;
transition: 0.3s;
}
.imgsize{
max-width: 10vw;
}
.wide-as-needed {
position: fixed;
bottom: 0;
left: 0;
overflow: auto;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap; width:100%;
}
.fundo{
background:rgba(255,255,255,0.5);
}
.texto {
font-family: 'Open Sans', sans-serif;
}
.preview{
max-width:100%;
max-height:100%;
}
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 255, 255, 0.9),
rgba(255, 255, 255, 0.7),
rgba(255, 255, 255, 0.7),
rgba(255, 255, 255, 0)
),
/* bottom, image */
url(bg.jpeg);
}
.lata {
position: relative;
text-align: center;
color: white;
}
.hide {
display:none;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body background="bg.jpeg" class="tinted-image" style="background-attachment: fixed;">
<div class= "row tabcontent" id="London">
<!-- parte do texto episodio 1-->
<div class="col-sm-12 col-lg-4 m-4 " style="overflow-y:scroll; max-height: 65vh; position: static;">
<div class="texto m-2">
<h2>Origens</h2>
<p>
A arte de conservar alimentos foi sempre uma constante na história da humanidade. Os métodos mais ancestrais como a defumação e a salga permitiram o consumo de peixe em larga escala e o seu transporte para zonas distantes do litoral. Até o século XVII, parte do pescado conservado tinha por objectivo o fornecimento de navios envolvidos na expansão Ultramarina.
No entanto Portugal tem uma tradição milenar na conservação de pescado que remonta ao período grego e romano, com a produção do Garum – uma afamada conserva de sangue e vísceras de peixes que se deixava a secar em salmoura e que era exportada para todo o mediterrâneo.
</p>
</div>
<div class="texto">
<h2><i>Origins</i></h2>
<p><i>
The art of preserving food has always been a constant in the history of mankind. More ancestral methods such as smoking and salting have allowed the consumption of fish on a large scale and its transport to areas far from the coast. Until the seventeenth century, part of the preserved fish had the objective of supplying ships involved in the Overseas expansion.
However Portugal has a millennial tradition in the conservation of fish that goes back to the Greek and Roman period, with the production of Garum - a famous preserve of blood and viscera of fish that was allowed to dry in brine and that was exported to all the Mediterranean.</i> </p>
</div>
</div>
<!-- segunda coluna episodio 1-->
<div class="col m-4 ">
<div >
<img src="e01.png" class="preview mt-2">
</div>
<div class="d-flex justify-content-center ">
<a href="#" class="btn btn-info mt-2 texto" role="button" aria-pressed="true">Ver Filme / Watch Movie</a>
</div>
</div>
</div>
<div class= "row tabcontent" id="Paris">
<!-- parte do texto episodio 1-->
<div class="col-sm-12 col-lg-4 m-4 " style="overflow-y:scroll; max-height: 65vh; position: static;">
<div class="texto m-2">
<h2>Origens 2</h2>
<p>
testeeee
No entanto Portugal tem uma tradição milenar na conservação de pescado que remonta ao período grego e romano, com a produção do Garum – uma afamada conserva de sangue e vísceras de peixes que se deixava a secar em salmoura e que era exportada para todo o mediterrâneo.
</p>
</div>
<div class="texto">
<h2><i>Origins</i></h2>
<p><i>
The art of preserving food has always been a constant in the history of mankind. More ancestral methods such as smoking and salting have allowed the consumption of fish on a large scale and its transport to areas far from the coast. Until the seventeenth century, part of the preserved fish had the objective of supplying ships involved in the Overseas expansion.
However Portugal has a millennial tradition in the conservation of fish that goes back to the Greek and Roman period, with the production of Garum - a famous preserve of blood and viscera of fish that was allowed to dry in brine and that was exported to all the Mediterranean.</i> </p>
</div>
</div>
<!-- segunda coluna episodio 1-->
<div class="col m-4 ">
<div >
<img src="e01.png" class="preview mt-2">
</div>
<div class="d-flex justify-content-center ">
<a href="#" class="btn btn-info mt-2 texto" role="button" aria-pressed="true">Ver Filme / Watch Movie</a>
</div>
</div>
</div>
<!-- barra de baixo-->
<div class="container-fluid fixed-bottom">
<div class="row flex-row flex-nowrap ml-1 mr-2 wide-as-needed">
<div>
<a href="#" class="tablinks" onclick="openCity(event, 'London')">
<img src="1.png" class="on position imgsize">
</a>
</div>
<div>
<a href="#" class="tablinks" onclick="openCity(event, 'Paris')">
<img src="2.png" class="off position imgsize">
</a>
</div>
<div>
<img src="3.png" class="off position imgsize">
</div>
<div>
<img src="4.png" class="on position imgsize">
</div>
<div>
<img src="1.png" class="off position imgsize" >
</div>
<div>
<img src="1.png" class="on position imgsize">
</div>
<div>
<img src="1.png" class="on position imgsize">
</div>
<div>
<img src="1.png" class="on position imgsize">
</div>
<div>
<img src="1.png" class="on position imgsize">
</div>
<div>
<img src="1.png" class="on position imgsize">
</div>
</div>
</div>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
可在此处找到该页面:working page
提前致谢!
最佳答案
使用 Bootstrap 4 时，可见“行”类的显示值应为“flex”。在 JavaScript 的这一行中，您的“tabcontent”DIV 被覆盖以显示“ block ”:
document.getElementById(cityName).style.display = "block";
将“block”切换为“flex”，您应该会得到想要的行为。
关于html - 隐藏的选项卡未显示正确的布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55092937/