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

问题描述 投票:2回答:1

我用一个恼人的问题战斗:我具有由侧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>
css html5 css3 bootstrap-4 toggle
1个回答
0
投票

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

我想补充以下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:absolutebottom:0px。不幸的是,position:absolute搞砸了一些水平居中的,所以我不得不为了保住在其width: calc(100% - 30px)中心的每个.card添加article.col

编辑:

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

© www.soinside.com 2019 - 2024. All rights reserved.