Bootstrap旋轉木馬沒有反應

Question

我正在一個簡單的着陸頁上，它上面有一個旋轉木馬。 我在標題內添加了一個標題和一個textarea。 圖像的高度爲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;），然後將高度100％指定爲.carousel-inner> .item，然後將高度100％指定爲.carousel-inner> .item> img，.carousel-inner>。項目> 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值？）