无法删除移动版中旋转木马 Bootstrap 和社交媒体图标下方的白色 space

Question

这是我在 PC 上查看时的网站：

当我检查移动版本时，我意识到汽车图像和底部社交媒体图标之间存在巨大差距。事实上，社交媒体图标下方还有一个巨大的space。

这是我在移动版中看到的（最底部有一个社交媒体图标，但由于间距没有显示）：

到目前为止，我已经尝试将 .carousel-inner img 调整为 max-height 和 max-width: 100%。还尝试创建 .carousel-item 作为高度：___px，但它似乎无法正常工作。

基本上，我希望删除空白 space 以便网站在移动版本中看起来更漂亮。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="monday.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>J[a]son</title>
</head>
<body>
    <nav>
        <div class = "logo">
            <h4>J[a]son</h4>
        </div>
        <ul class = "nav-links">
            <li>
                <a href="#">HOME</a>
            </li>
            <li>
                <a href="#">PHOTOGRAPHY</a>
                <ul class="sub-menu">
                    <li><a href="photography_colour.html">Colour</a></li>
                    <li><a href="photography_black.html">Black</a></li>
                </ul>
            </li>
            <li>
                <a href="#">CODING</a>
            </li>
            <li>
                <a href="#">ABOUT</a>
            </li>
        </ul>
        <div class= "burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </nav>
    <script src="testing.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <!--<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">-->
    <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 class="d-block w-75" src="Photos/carousel.JPG" alt="First slide">
            <p>November, 2019. Seattle, USA.</p>
          </div>
          <div class="carousel-item">
            <img class="d-block w-75" src="Photos/statute.JPG" alt="Second slide">
            <p>June, 2020. Kelowna, BC.</p>
          </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>
           <!--<p>June, 2020. Sunshine Coast, BC, Canada </p>-->
    <div class ="bottom">
      <div class = "logos">
        <a href="https://github.com/j-ahn94" target="_blank" class="fa fa-github"></a>
        <a href="https://whosebug.com/users/14266888/jason-a" target="_blank" class="fa fa-stack-overflow"></a>
        <a href="https://www.linkedin.com/in/jasonja-ahn/" target="_blank" class="fa fa-linkedin"></a>
      </div>
    </div>
</body>
</html>

CSS

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    background-color: black !important; /*rgb(241, 233, 233);*/
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    
}

nav {
    display: flex !important;
    justify-content: space-between;
    /*padding-right: 2em;*/
    padding-left: 2em;
    padding-top: 2em;
    padding-bottom: 1.5em;
    align-items: center;
    min-height: 8vh;
    background-color: black;
    /*font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;*/
    font-family: 'Poppins', sans-serif;
}

.logo {
    background-color: black;
    color: rgb(240, 235, 235);
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.nav-links {
    display: flex;
    justify-content: space-around;
    width: 30%;
}

.nav-links li {
    list-style: none;
}

.nav-links a {
    color: white;
    text-decoration: none;
    letter-spacing: 1px;
    font-weight: bold;
    font-size: 11px;
    /*padding: 5px 5px;*/
}

.burger {
    display: none;
    cursor: pointer;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px;
    transition: all 0.3s ease;
}

@media screen and (max-width:1430px) {
    .nav-links {
        width: 40%;
    }
}

@media screen and (max-width:950px) {
    body {
        overflow-x: hidden;
    }
    .nav-links {
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: black;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 45%;
        transform: translateX(100%);
        padding-right: 2em;
        transition: transform 0.5s ease-in;
    }
    .nav-links li {
        opacity: 0;
    }
    .burger {
        display: block;
        padding-right: 1em;
    }
    .sub-menu {
        position: relative;
    }
}

.nav-active {
    transform: translate(0%);https://ahweb.org.uk/car.png
}

.main_car_wrapper {
    background-image: url(https://ahweb.org.uk/car.png);
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: contain;
    max-width: 100%;
    height: auto;
    padding-top: 6em;
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity :1;
        transform: translateX(0px);
    }
}

.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);

}

.sub-menu {
    display: none;
}

.sub-menu li a {
    /*display: block;*/
    text-decoration: none;
    color: white;
    border-top: 1px solid white;
    background: rgb(221, 215, 215);
    white-space: nowrap;
    top: 40px;
    left: 25px;
    padding: 5px;
    padding-top: 1px;
}

.sub-menu li a:hover{
    background: rgb(10, 10, 10);
    opacity: 1;
    transition: all 0.5s ease;   
}

li:hover ul {
    display: flex;
    position: absolute;
}

li:hover li {
    float: none;
    font-size: 8px;
}

li:hover a {
    background: rgb(5, 5, 5);
}

li:hover li a:hover {
    background: rgb(19, 18, 18);
}

.bottom {
    margin-top: auto; 
}

.logos {
    display: flex !important;
    flex-direction: row;
    background-color: black;
}

.logos a {
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    font-size: 17px;
}

.carousel-inner p {
    text-align: center;
    color: black;
    font-size: 14px;
}

.carousel-inner {
    background-color: black;
}

.carousel-inner img {
    /*display: flex;
    margin: 0 auto;
    width: 60vw;
    max-height: auto;
    align-items: center;*/
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
}

.carousel-item {
    height: 300px;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

JavaScript

const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');
  //Toggle Nav
  burger.addEventListener('click', () => {
    //Toggle Nav
    nav.classList.toggle('nav-active');

    //Animate Links
    navLinks.forEach((link, index) => {
      if(link.style.animation) {
        link.style.animation = ''
      } else {
          link.style.animation = `navLinkFade 0.2s ease forwards ${index / 7 + 0.5}s`;
      }
    });
    //Burger Animation
    burger.classList.toggle('toggle');
  });
  //Animate Links
  
}

navSlide();

Answer 1

这些图标位于

    <div class ="bottom">
      <div class = "logos">
              Logos Are Here
      </div>
    </div>

因此，如果您检查 CSS 中的那些类，您会发现：

.bottom {
    margin-top: auto; 
}

和

.logos {
    display: flex !important;
    flex-direction: row;
    background-color: black;
}

只需将 margin-top 从自动更改为透视百分比即可解决此问题：

.bottom {
        margin-top: 1%; 
    }

这是您要找的吗？

无法删除移动版中旋转木马 Bootstrap 和社交媒体图标下方的白色 space

Cannot remove white space below Carousel Bootstrap and Social Media icon in Mobile Version

html

css

space

carousel