引导4拨动如何在单击切换只需一个元素不是所有的

Question

我用一个恼人的问题战斗：我具有由侧3元件侧的页（固定）的底部。我加bootstrap4切换到显示只有文本时，用户点击图像和它的作品...但切换所有图像涨不只有一个。我想这不是一个大问题，但多次尝试后，我失败了。也许有人知道的解决方案。这是网页：www.ourway.pl。

 .carousel {
        margin-left: auto;
        margin-right: auto;
        width: 100vw;
        position: fixed;
        bottom: 10px;
    }
 .card-text {
        margin: 5px 5% ;
        text-align: justify;
        text-justify: auto;
        line-height: 25px;
    }
  .card-img-top {
        margin-left: auto;
        margin-right: auto;
        display: block;
        border-radius: 80px;
        border: 3px solid rgba(0, 0, 0, 0.4) ;
        text-align: center;
        align-content: center;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/css/tether.min.css" rel="stylesheet"/>


   

 <section class="container-fluid p-0 topcard">
       <div class="row justify-content-center" >
       <!-- Carousel -->
          <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="8000">
             <div class="carousel-inner" role="listbox">
              <div class="carousel-item active">
               <article class="col">
                <div class="card carousel-style">
                 <div class="card-block p-0">
                  <h2 class="card-title">Rumunia - Sinaia</h3>
                    <img class="card-img-top opacity" data-toggle="collapse" data-target="#demo" aria-expanded="false" aria-controls="collapseExample" src="/static/rumunia/woloszczyzna/sinaia/cover.jpg" alt="Card image cap" title="Kliknij aby rozwinąć opis">
 

             <p class="card-text collapse" id="demo" >Dziś zapraszamy Was do      historycznej krainy zwanej Wołoszczyzną, gdzie u stóp gór Bucegów leży urokliwe miasteczko Sinaia, które upodobała sobie para królewska budujac tu swoją zapierającą dech letnią rezydencję Peleş.</p>
            <a class="btn" href="/Rumunia/woloszczyzna/sinaia/opowiesc.html" title="Relacja">Opowieść</a>
            <a class="btn" href="/Rumunia/rumunia-wskazowki.html#Sinaia" title="Wskazówki">Wskazówki</a>
            <a class="btn" href="/Rumunia/woloszczyzna/sinaia/galeria.html" title="Galeria">Galeria</a>
             </div>
            </div>
           </article>

           <article class="col">
            <div class="card carousel-style">
             <div class="card-block p-0">
              <h2 class="card-title">Polska - Promnice i okolice</h3>
               <img class="card-img-top opacity" data-toggle="collapse" data-target="#demo2" aria-expanded="false" aria-controls="collapseExample" src="/static/polska/slask/promnice/cover.jpg" alt="Card image cap" title="Kliknij aby rozwinąć opis">
              <p class="card-text collapse" id="demo2">Dziś zapraszamy Was na Śląsk, a dokładnie w okolice Promnic, gdzie czeka na Was mnóstwo atrakcji, takich jak pałace, zamki, urokliwa ścieżka wokół jeziora, zagroda żubrów, skansen czy możliwość zwiedzania Tyskiego Browaru. </p>
              <a class="btn" href="/Polska/slask/promnice/opowiesc.html" title="Relacja">Opowieść</a>
             <a class="btn" href="/Polska/polska-wskazowki.html#Slask" title="Wskazówki">Wskazówki</a>
             <a class="btn" href="/Polska/slask/promnice/galeria.html" title="Galeria">Galeria</a>
                 </div>
                </div>
               </article>

               <article class="col">
                <div class="card carousel-style">
                 <div class="card-block p-0">
                  <h2 class="card-title">Polska - Schronisko na Kudłaczach</h3>
                   <img class="card-img-top opacity" data-toggle="collapse" data-target="#demo3" aria-expanded="false" aria-controls="collapseExample"src="/static/polska/beskidmakowski/pcim-kudlacze/cover.jpg" alt="Card image cap" title="Kliknij aby rozwinąć opis">
                  <p class="card-text collapse" id="demo3">Jeśli szukacie pomysłu na krótką popołudniową wycieczkę w okolicy Krakowa to polecamy pętle z Pcimia przez schronisko na Kudłaczach!</p>
                  <a class="btn" href="/Polska/BeskidMakowski/Pcim-Kudlacze/opowiesc.html" title="Relacja">Opowieść</a>
                  <a class="btn" href="/Polska/polska-wskazowki.html#BeskidMakowski" title="Wskazówki">Wskazówki</a>
   <a class="btn" href="/Polska/BeskidMakowski/Pcim-Kudlacze/galeria.html" title="Galeria">Galeria</a>
                   </div>
                  </div>
                 </article>
              </div>
            </div>
          </div>  
         </div>
        </section>

Answer 1

感谢包括网站！它使我很容易尝试一些东西出来。

我想补充以下CSS规则：

header{
    z-index:1;
}

article.col{
    height:100vh;
}

.card.carousel-style{
    width: calc(100% - 30px);
    position: absolute;
    bottom: 0px;
}

如果您想了解更多的解释，那么让我们来看看相关的结构：

<div class="carousel-item">
    <article class="col">
        <div class="card carousel-style"></div>
    </div>
    <article class="col">
        <div class="card carousel-style"></div>
    </div>
    <article class="col">
        <div class="card carousel-style"></div>
    </div>
</div>

在您的网站，该.carousel-item div有其高度扩张，以适应最高的子项（.cards之一）的。所以，当你点击一个.card，它的扩大，.carousel-item变得更高。所有.cards的默认位置是在他们的父母的顶部，所以当父母得到高他们都去了。

如果你补充一点，我上面列出的CSS规则，那么.carousel-item变得页面一样高，但每个.card保持低，因为它可以，由于position:absolute和bottom:0px。不幸的是，position:absolute搞砸了一些水平居中的，所以我不得不为了保住在其width: calc(100% - 30px)中心的每个.card添加article.col。

编辑：

的.carousel-item成为在页面一样高的另一个影响是，它涵盖了导览列。因此，我们需要让你的头中脱颖而出的.carousel-item的顶部，这样用户仍然可以点击它。所以设置z-index的.header是任何大于0，它应该工作。