Bootstrap 4丸点击下面显示的内容和/或没有显示

时间：2018-05-11 13:27:45

标签： javascript html css twitter-bootstrap

问题是当我点击最后两片药片时＃34;活动＆＃34;和＆＃34;影响＆＃34;并在＃34; STEMuli＆＃34;的药丸含量正下方显示信息。 （点击STEMuli后）。但奇怪的是，当你点击＆＃34;我们是谁＆＃34;然后点击＆＃34;活动＆＃34;或＆＃34;影响＆＃34;它没有做任何事情。我把头发拉出来试图解决这个问题，我寻找挥之不去的div标签，当我只有3个药丸选项的时候，我就让它工作了。但是当我把它放进去的第四个项目时就把它扔掉了。有什么建议吗？

另外请欣赏我的 Infinity War 占位符图片。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

你忘了在某个地方关闭一个html标签，只需在你的第三个药丸之前添加<\div>一次，就可以完美地运作

我们想要最少示例的第一个原因是为了防止这种情况，使用小文件和良好的缩进，您将能够立即发现问题

答案 1 :(得分：0)

急剧地，我检查了你的所有代码，没有任何错误，我只是删除里面的数据，因为它看起来太乱看，我只是把测试文本和它的工作正常，你可以在这里检查

fiddle: https://jsfiddle.net/ew0xb5m3/
相关问题
最新问题