所以问题是当我单击最后两个药丸“事件”和“影响”并在“STEMuli”药丸内容正下方显示信息时(单击 STEMuli 后)。但奇怪的是，当你点击“我们是谁”，然后点击“事件”或“影响”时，它什么也没做。我正在努力弄清楚这个问题，我寻找挥之不去的 div 标签，有一次我只有 3 个药丸选项时我让它工作了。但是当我把这第四个元素放进去时，它就失去了同步。有什么建议吗？
另请欣赏我的无限 war 占位符图像。
.popover-header{
color:#000000;
}
li{
color:#000000;
}
#border{
border-style: solid;
border-color: black;
}
#row{
overflow: hidden;
}
.logo{
z-index:0;
}
h5{
color: #ffffff;
}
.row {
width: 100%;
z-index: 1;
}
.row__inner {
-webkit-transition: 450ms -webkit-transform;
transition: 450ms -webkit-transform;
transition: 450ms transform;
transition: 450ms transform, 450ms -webkit-transform;
font-size: 0;
white-space: nowrap;
margin: 50px 0;
padding-bottom: 30px;
padding-bottom: 30px;
}
.tile {
position: relative;
display: inline-block;
width: 250px;
height: 250px;
margin-right: 10px;
margin-left: 50px;
font-size: 20px;
cursor: pointer;
-webkit-transition: 450ms all;
transition: 450ms all;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.tile__img {
width: 250px;
height: 250px;
-o-object-fit: cover;
object-fit: cover;
}
.tile__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 10px;
opacity: 0;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.9)), to(rgba(0,0,0,0)));
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
-webkit-transition: 450ms opacity;
transition: 450ms opacity;
}
.tile__details:after,
.tile__details:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: #000;
}
.tile__details:before {
left: 0;
width: 100%;
font-size: 30px;
margin-left: 7px;
margin-top: -18px;
text-align: center;
z-index: 2;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
padding: 10px;
}
.row__inner:hover {
-webkit-transform: translate3d(-62.5px, 0, 0);
transform: translate3d(-62.5px, 0, 0);
}
.row__inner:hover .tile {
opacity: 0.3;
}
.row__inner:hover .tile:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.tile:hover ~ .tile {
-webkit-transform: translate3d(125px, 0, 0);
transform: translate3d(125px, 0, 0);
}
a:hover{
color: #F1D302;
}
.checkbox-wrapper {
height: 13px;
width: 13px;
}
.card-img-top {
height: 300px;
width: 100%;
}
.btn-xlong {
padding: 10px 50px;
font-size: 22px;
line-height: normal;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.steps-form-3 {
width: 2px;
height: 470px;
position: relative; }
.steps-form-3 .steps-row-3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
.steps-form-3 .steps-row-3:before {
top: 14px;
bottom: 0;
position: absolute;
content: "";
width: 2px;
height: 100%;
background-color: #7283a7; }
.steps-form-3 .steps-row-3 .steps-step-3 {
height: 150px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
text-align: center;
position: relative; }
.steps-form-3 .steps-row-3 .steps-step-3.no-height {
height: 50px; }
.steps-form-3 .steps-row-3 .steps-step-3 p {
margin-top: 0.5rem; }
.steps-form-3 .steps-row-3 .steps-step-3 button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 {
width: 60px;
height: 60px;
border: 2px solid #59698D;
background-color: white !important;
color: #59698D !important;
border-radius: 50%;
padding: 18px 18px 15px 15px;
margin-top: -22px; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3:hover {
border: 2px solid #4285F4;
color: #4285F4 !important;
background-color: white !important; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 .fa {
font-size: 1.7rem; }
::-webkit-scrollbar{
width: 0px;
height:5px;
}
::-webkit-scrollbar-thumb{
border-radius:10px;
box-shadow: insert 0 0 6px rgba(0,0,0,.3);
}
.spacing{
padding: 6px;
}
/*This css file defines the color scheme and font of all of the webpages so import into every new webpage*/
body {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
background-color: #9E2B25;
color:#FDFFFC;
}
.button{
background-color:#0267C1;
}
.nav-pills .nav-link.active
{
background-color: #0267c1;
}
h3{
color: #ffffff;
}
#cardimg
{
height:300px;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>STEMuli</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Rubik:500" rel="stylesheet">
<link href="/css/mastercss.css" rel="stylesheet">
<link rel="stylesheet" href="/css/profile.css" crossorigin="anonymous">
<script src="/js/moment.js"></script>
</head>
<body>
<!--This is where the logo is-->
<div id="row" class="row h-100 justify-content-center">
<img src="https://boygeniusreport.files.wordpress.com/2018/04/avengers-infinity-war3.jpg?quality=98&strip=all&w=782" class="img-fluid" alt="Responsive image">
</div>
<ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-we-tab" data-toggle="pill" href="#pills-we" role="tab" aria-controls="pills-we" aria-selected="true">
<h3>Who We Are</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-STEM-tab" data-toggle="pill" href="#pills-STEM" role="tab" aria-controls="pills-STEM" aria-selected="false">
<h3>STEMuli</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-activity-tab" data-toggle="pill" href="#pills-activity" role="tab" aria-controls="pills-activity" aria-selected="false">
<h3>Activity</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-impact-tab" data-toggle="pill" href="#pills-impact" role="tab" aria-controls="pills-impact" aria-selected="false">
<h3>Impact</h3>
</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-we" role="tabpanel" aria-labelledby="pills-we-tab">
<blockquote class="blockquote text-center">
<video width="700" controls>
<source src="/img/IMG_0021.mov" type="video/mp4">
<source src="/img/IMG_0021.mov" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<h5>Texas Capital Bank’s mission is helping businesses grow and communities prosper. Our approach to banking is to find the best people, develop the best relationships, and build something great together.</h5></blockquote>
</div>
<div class="tab-pane fade" id="pills-STEM" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="row">
<h2 style="padding:20px;">Credit</h2>
<div class="row__inner">
<a href='#.' onclick="redirectbankon()">
<div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-html="true" title="Description" data-content="The Bank On It module provides an overview of banking services and is designed to help participants build a positive relationship with a financial institution.
">
<div class="tile__media">
<img class="tile__img" src="http://cdn.collider.com/wp-content/uploads/2018/04/avengers-infinity-war-imax-poster.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Bank On It</h5>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="tab-pane fade" id="pills-activity" role="tabpanel" aria-labelledby="pills-activity-tab">PLEASE SHOW!</div>
<div class="tab-pane fade" id="pills-impact" role="tabpanel" aria-labelledby="pills-impact-tab">PLEASE SHOW!</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/JavaScript" src="/js/redirect.js"></script>
<script type="text/JavaScript" src="/js/form.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>最佳答案
你忘了在某处关闭一个 html 标签，只需添加 <\div>在您的第 3 颗药丸之前使用一次，效果非常好
我们想要最少示例的第一个原因是为了防止使用小文件和良好缩进，您将能够立即发现问题
关于javascript - Bootstrap 4 pills 点击内容显示在下方和/或不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50293401/