Bootstrap：导航栏在滚动时收缩

Question

我正在制作一个网站，完成后，我收到了申请，@media但遇到了问题。在我的徽标或任何东西上使用后@media，我运行它，但 chrome 没有检测到@media. 然后为了解决这个问题，我制作了一个随机页脚并应用@media在它上面。我把字体调小了，效果很好。为什么它不适用于正文或标题？<!-- body --><div class="body"><section class="body-left">  <p class="left-text">SEE YOURSELF BY. <br> <span>VANITY FAIR</span></p><video autoplay loop src="img/video.mp4"></video></section><section class="body-right">  <p class="right-text"><span class="quote">"</span><br>I may be a beginner at some things, <br> but I've got a black belt in shopping. <br> — Phyllis Nefler </p><img src="img/female.jpg" alt="sdf" class="female"></section></div><!-- end body --><footer>  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></footer></body></html>在这段代码中，主体是媒体，在那里不起作用。但我创建的虚拟页脚在那里工作。奇怪的。}.quote{  font-size: 50px;  font-family:'Playfair Display', sans-serif;}/* body section right */ p{  width: 100%;  height: 30vh;  font-size: 40px;}@media all and (max-width:1000px) {p{  font-size: 20px;}}在此示例中，引用（body-right）上的媒体不起作用p 是虚拟页脚媒体，正在那里工作没有错误。

Answer 1

我希望这会对你有很大帮助。

$(window).on("scroll", function(e) {

 if(window.scrollY > 0){

   $('#navbar').addClass('tiny');

 }

 else{

   $('#navbar').removeClass('tiny');

 }

});

.navbar, .navbar-brand svg{

  transition: 400ms;

}

.tiny{

  padding: .25rem 1rem;

}

.tiny .navbar-brand svg{

  width: 30px;

  height: 30px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<nav class="navbar navbar-expand-lg navbar-main sticky-top navbar-dark bg-dark" id="navbar">

  <a class="navbar-brand" href="#">

    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"></path><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"></path></svg>

  </a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation" >

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarNavDropdown">

    <ul class="navbar-nav ml-auto">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item dropdown">

        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownCabling" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Phone Systems   <i class="fas fa-phone"></i></a>

        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownCabling">

          <a class="dropdown-item" href="#">Business Phone Systems</a>

          <a class="dropdown-item" href="#">Cat 6</a>

          <a class="dropdown-item" href="#">Cat 6a</a>

        </div>

      </li>

      <li class="nav-item dropdown">

        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownCabling" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Lines & Calls   <i class="fas fa-phone"></i></a>

        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownCabling">

          <a class="dropdown-item" href="#">Cat 5</a>

          <a class="dropdown-item" href="#">Cat 6</a>

          <a class="dropdown-item" href="#">Cat 6a</a>

        </div>

      </li>

Answer 2

使用它收缩 5 秒：

   $("body").scroll(function() {
                        $('#navbar1').animate({
                            height: <<required height>>
                        }, 5000);
                    });

并添加

<nav class="navbar navbar-expand-lg navbar-main sticky-top" id='navbar1'>

Answer 3

你好，我想它会问你的问题。

<nav id="my-nav" class="navbar navbar-expand-lg navbar-main sticky-top heavy">

   <a class="navbar-brand" href="#">

   <img class="logo heavy-logo" id="my-logo" src="./logo.jpg"></a>

   </a>

   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation" >

   <span class="navbar-toggler-icon"></span>

   </button>

   <div class="collapse navbar-collapse" id="navbarNavDropdown">

      <ul class="navbar-nav ml-auto">

         <li class="nav-item active">

            <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>

         </li>

         <li class="nav-item dropdown">

            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownCabling" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Phone Systems   <i class="fas fa-phone"></i></a>

            <div class="dropdown-menu" aria-labelledby="navbarDropdownCabling">

               <a class="dropdown-item" href="#">Business Phone Systems</a>

               <a class="dropdown-item" href="#">Cat 6</a>

               <a class="dropdown-item" href="#">Cat 6a</a>

            </div>

         </li>

         <li class="nav-item dropdown">

            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownCabling" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Lines & Calls   <i class="fas fa-phone"></i></a>

            <div class="dropdown-menu" aria-labelledby="navbarDropdownCabling">

               <a class="dropdown-item" href="#">Cat 5</a>

               <a class="dropdown-item" href="#">Cat 6</a>

               <a class="dropdown-item" href="#">Cat 6a</a>

            </div>

         </li>

      </ul>

   </div>

</nav>

<div class="container"></div>

<style>