引導輪播沒有響應

Question

我正在一個簡單的登錄頁面上，該頁面的頂部有一個輪播。 我在標題內添加了標題和文本區域。 圖片的高度為547px。

問題是輪播沒有響應。 我只可以通過手機上的“提交”按鈕看到字幕的底部。

    <div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
        <img src="img/dog-cat.png" />
        <div class="carousel-caption" style="background-color: rgba(0, 0, 0, 0.3);">
        <h2>Licensed Veterinarians ready to answer your questions, 24 hours a day</h2>
        <p> 
        <h3>What is your question?</h3>
        <form method="POST" action="1.php">
        <div class="row">

            <div class="col-lg-6 col-lg-offset-3">

                <textarea class="form-control" id="textareaquestion" name="textareaquestion" style="display: block; margin-left: auto; margin-right: auto;" placeholder="Ask a vet for free" required></textarea>
        <div class="character-counter-wrapper"><span class="character-counter counter">0</span> characters typed</div>
        <div class="characters-remaining-wrapper"><span class="characters-remaining counter">250</span> characters left</div>
            </div>
        </div>
        <button class="btn btn-primary" type="submit">Submit Question</button>
        </form></p>
      </div>
    </div>
    <div class="item">
        <img src="img/vet-dog.png" class="img-responsive" />
        <div class="carousel-caption" style="background-color: rgba(0, 0, 0, 0.3);">
        <h2>Ask your questions and have them answered for free</h2>
        <p> 
        <h3>What is your question?</h3>
        <form method="POST" action="1.php">
        <div class="row">

            <div class="col-lg-6 col-lg-offset-3">

                <textarea class="form-control" id="textareaquestion" name="textareaquestion" style="display: block; margin-left: auto; margin-right: auto;" onkeyup="count()" placeholder="Ask a vet for free" required></textarea>
        <div class="character-counter-wrapper"><span class="character-counter counter">0</span> characters typed</div>
        <div class="characters-remaining-wrapper"><span class="characters-remaining counter">250</span> characters left</div>   
            </div>
        </div>
        <button class="btn btn-primary" type="submit">Submit Question</button>
        </form>
        </p>
      </div>
    </div>
    <div class="item">
        <img src="img/kittie.png" class="img-responsive" />
        <div class="carousel-caption" style="background-color: rgba(0, 0, 0, 0.3);">
        <h2>No waiting room necessary</h2>
        <p> 
        <h3>What is your question?</h3>
        <form method="POST" action="1.php">
        <div class="row">

            <div class="col-lg-6 col-lg-offset-3">

                <textarea class="form-control" id="textareaquestion" name="textareaquestion" style="display: block; margin-left: auto; margin-right: auto;" placeholder="Ask a vet for free" required></textarea>
        <div class="character-counter-wrapper"><span class="character-counter counter">0</span> characters typed</div>
        <div class="characters-remaining-wrapper"><span class="characters-remaining counter">250</span> characters left</div>       
            </div>
        </div>
        <button class="btn btn-primary" type="submit">Submit Question</button>
        </form></p>
      </div>
    </div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

  </div><!-- carousel -->

<!-- LINKED NAV -->
<ol class="carousel-linked-nav pagination">
  <li class="active"><a href="#1">1</a></li>
  <li><a href="#2">2</a></li>
  <li><a href="#3">3</a></li>
</ol>

和CSS：

#myCarousel {
margin-top: 50px;
}

.carousel-linked-nav,
.item img {
  display: block; 
  margin: 0 auto;
}

.carousel-linked-nav {
  width: 120px;
  margin-bottom: 20px;   
}


.carousel-caption {
    right: 20%;
    left: 20%;
    bottom:20%;
}

這是網站的實時鏈接： http : //www.vetrounds.com/index.php

任何幫助將不勝感激！

Answer 1

您需要做更多的研究，以使其“真正”地響應，使形式和事物更加流暢，但這是一個快速解決方案。 為類別carousel-inner指定靜態高度（例如，高度：250px;），然后將高度設置為.carousel-inner> .item 100％，然后將高度設置為.carousel-inner> .item> img，.carousel-inner> 100％。項目> a> img

我正在為響應式視圖提供示例（提示：使用媒體查詢，不要為所有屏幕尺寸都設置它）：

.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
height: 250px;
}

.carousel-inner > .item {
position: relative;
display: none;
-webkit-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
height: 100%;
}

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
display: block;
height: auto;
max-width: 100%;
line-height: 1;
height: 100%;
}

然后使字體具有響應性，使用em值覆蓋像素值（或者對於所有版本都使用em值？）