引导轮播没有响应

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值？）