Question

我正在制作一个简单的目标网页，其中有一个旋转木马。我在标题中添加了标题和文本区域。图像的高度为547像素。

问题是旋转木马没有响应。我只能通过手机上的提交按钮看到标题的底部。

    <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＆gt; .item，然后高度100％到.carousel-inner＆gt; .item＆gt; img，.carousel-inner＆gt; .item＆gt; a＆gt; 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值？）

Bootstrap轮播没有响应

1 个答案: