亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

Bootstrap：導航欄在滾動時收縮

Bootstrap：導航欄在滾動時收縮

慕尼黑8549860 2023-12-25 17:14:36
我正在制作一個網站，完成后，我收到了申請，@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 是虛擬頁腳媒體，正在那里工作沒有錯誤。
查看完整描述

3 回答

?
偶然的你

TA貢獻1841條經驗 獲得超3個贊

我希望這會對你有很大幫助。


$(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/[email protected]/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>


查看完整回答
反對 回復 2023-12-25
?
小怪獸愛吃肉

TA貢獻1852條經驗 獲得超1個贊

使用它收縮 5 秒：

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

并添加

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


查看完整回答
反對 回復 2023-12-25
?
素胚勾勒不出你

TA貢獻1827條經驗 獲得超9個贊

你好，我想它會問你的問題。


<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>


查看完整回答
反對 回復 2023-12-25
  • 3 回答
  • 0 關注
  • 238 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號