Bootstrap Carousel适合滑动到屏幕-无响应

fykwrbwg  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(140)

因此,我试图使我的旋转木马响应大小调整,和移动设备。但是,当我调整屏幕大小,实际的图像不停留在卡内,我有旋转木马在。
The website is actually live, so if you wanted to take a look, please visit wwww.alysaandjordanplustwo.baby
原谅我的技能-我是第一次学习前端。
下面是我的HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Alysa and Jordan Plus Two | Home </title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
    </head>
    <body style="background-image: url(img/background.png); background-size:cover;">

        <nav class="navbar navbar-expand-lg navbar-fixed-top navbar-dark" style="background-color: #6C3400;" >
            <a class="navbar-brand" style="color: white;" href="#">Jordan and Alysa Plus Two</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="background-color: #6C3400;">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
              <ul class="navbar-nav">
                <li class="nav-item active" >
                  <a class="nav-link" style="color: #FFCD73;" href="#">Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" style="color: white;" href="photo_gallery.html">Photo Gallery</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" style="color: white;" href="registry.html">Registry</a>
                </li>
                
                <div class="dropdown nav-link" style="padding: none; margin: none;">
                    <a class="dropdown-toggle" href="about.html" style="background-color: #6c3400; color: white;" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      About Us
                    </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                      <a class="dropdown-item no-border" href="baby_b_memorial.html">Baby B Memorial</a>
                    </div>
                </div>
                
                
                
                <li class="nav-item">
                    <a class="nav-link" style="color: white;" href="#">Contact Us</a>
                  </li>
              </ul>
            </div>
          </nav>

          <div class="container justify-content-center">

            <div class="row justify-content-center"> 

              <div class="card justify-content-center" style="margin-top: 1rem;">
                <div class="card-body">
                  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="width: 800px; height: 400px" >
                    <ol class="carousel-indicators">
                      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner justify-content-center">
                      <div class="carousel-item justify-content-center active " style="width:800px; height:400px;">
                        <img class="card-img"  src="img/first_halloween_resized.jpg"  alt="First slide">
                      </div>
                      <div class="carousel-item justify-content-center" style="width:800px; height:400px;" >
                        <img class="card-img"  src="img/2nd_image_resized.jpeg" alt="Second slide">
                      </div>
                      <div class="carousel-item justify-content-center" style="width:800px; height:400px;">
                        <img class="card-img" src="img/third_slide.svg" alt="Third slide">
                      </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                      <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
                      <span class="sr-only">Next</span>
                    </a>
                  </div>
                </div>
              </div>
          </div>
          </div>

            <div class="container text-center" style="background-color: #FFCD73; border-radius: 10px; height: 100%; width: 100%; margin-top: 5vh;">
                <h3 style="font-style:italic; padding-top: 15px; padding-bottom: 15px;">"Don't find love. Let love find you. <br> That is why it is called falling in love because you do not force yourself to fall,<br> you just fall" <br> - Author Unknown</h3>
                <h2 style="font-style:italic; padding-top: 15px; padding-bottom: 15px;">~~~</h2>
                <a href="gender_reveal.html" style="font-style:bold; color: #6c3400; padding-top: 15px; padding-bottom: 15px;"><h3 style="font-style:bold; color: #6c3400; padding-top: 15px; padding-bottom: 15px;">Find out our babies gender!</h3></a>
            </div>
        

          <div class="container" style="padding-top: 5vh;">
            <div class="row">
                <div class="col-lg">
                    <!-- Photo on the left --> 
                    <img class="rounded mx-auto d-block img-thumbnail" src="img/first_photo.jpg" style="margin-bottom: 5vh;">
                </div>
            <div class="col-sm" style="background-color: #FFCD73; border-radius: 10px; padding-top: 15px; padding-bottom: 10vh;">
                <H2>Our Story</H2>
                <p>Alysa and I met for the first time at Kennesaw State University in the Fall 2022 semester. I was the first one to message Alysa, as we were in a student group where we could all talk about our majors and meet new people. I decided to message Alysa to see if she wanted to meet and perhaps study together. Which is just what we did – we ended up studying together, and I offered as much help as I could remember while she was taking Calculus. It had been years since I took Calculus 1, and I was very rusty. Before we knew it, we were always around each other, almost every possible minute that we could. Eventually, I believe, we ended up falling for each other, even though we both were hesitant to enter a relationship. I am so, so, so glad that we met, and for the next steps of our life together!  <br><br> - Jordan | September 7th, 2022 </p>
            </div>
            </div>
          </div>
         
   
    <!-- Footer -->
<footer class="page-footer font-small white pt-4" style="background-color: #6C3400; margin-top: 10vh;">

    <!-- Footer Links -->
    <div class="container-fluid text-center text-md-left">
  
      <!-- Grid row -->
      <div class="row">
  
        <!-- Grid column -->
        <div class="col-md-6 mt-md-0 mt-3">
  
          <!-- Content -->
          <h5 style="color: #FFFFFF;">Thank you for visiting our website!</h5>
          <p style="color: #FFFFFF;">Please be respectful, and only share this website with immediate family for the time being. Thank you! <br><br>- Jordan & Alysa</p>
  
        </div>
        <!-- Grid column -->
  
        <hr class="clearfix w-100 d-md-none pb-3">
  
        <!-- Grid column -->
        <div class="col-md-3 mb-md-0 mb-3">
  
          <!-- Links -->
          <h5 class="text-uppercase" style="color:#FFFFFF;">Registry Links</h5>
  
          <ul class="list-unstyled">
            <li>
              <a href="https://www.amazon.com/baby-reg/J48Z6DSREQX9">Amazon</a>
            </li>
            <li>
              <a href="#!">Buy Buy Baby</a>
            </li>
            <li>
              <a href="#!">Target</a>
            </li>
          </ul>
  
        </div>
        <!-- Grid column -->
  
        <!-- Grid column -->
        <div class="col-md-3 mb-md-0 mb-3">
  
          <!-- Links -->
          <h5 class="text-uppercase" style="color:#FFFFFF;">Quick Links</h5>
  
          <ul class="list-unstyled">
            <li>
              <a href="#!">RSVP Form (Coming Soon)</a>
            </li>
            <li>
              <a href="#!">Link 2</a>
            </li>
            <li>
              <a href="#!">Link 3</a>
            </li>
            <li>
              <a href="#!">Link 4</a>
            </li>
          </ul>
  
        </div>
        <!-- Grid column -->
  
      </div>
      <!-- Grid row -->
  
    </div>
    <!-- Footer Links -->
  
    <!-- Copyright -->
    <div class="footer-copyright text-center py-3" style="color:#FFFFFF">Copyright &copy; 2022:
      <a href="https://jordanviehmeyer.dev"> Written with &heartsuit; by Jordan Viehmeyer (Dad)</a>
    </div>
    <!-- Copyright -->
  
  </footer>
  <!-- Footer -->

  <!-- Javascript-->
   <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 

</body>
</html>

我没有修改carousel本身的CSS代码,所以它是使用min.css文件的 Bootstrap 标准。
照片的尺寸是800宽,400高。这就是我希望他们如何显示,但比例。

xxls0lw8

xxls0lw81#

从你的代码中删除所有的style="width:800px; height:400px;"。通过添加这个元素,你强制元素为固定大小,这样元素就不会有响应。
在您的carousel中,将.card-img类替换为d-block w-100类,如下例所示...(不要使用card-img类)
按照这些BS文档...带指示器的旋转木马

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

相关问题