Question

我正在尝试构建我的投资组合网站，并且当网页较小时我试图让我的标题和导航菜单叠加在一起时出现问题，否则会恢复正常。

这是我的HTML代码。

<body class="container" id="boostrap-overrides">

<a id="name" href="#">Jasmine Parson</a>
 <ul id="list" class="nav justify-content-end">
  <li class="nav-item">
   <a class="nav-link" href="#">About</a>
  </li>
  <li class="nav-item">
   <a  id="mid" class="nav-link" href="#">Work</a>
  </li>
  <li class="nav-item">
   <a class="nav-link" href="#">Contact</a>
 </li>
</ul>

所有相关CSS

#boostrap-overrides ul {
 flex-wrap: nowrap;

}

.center {
 text-align: center;
}

ul {
 float:right;   
 display: inline;
 line-height: 15px;
 margin: 0 auto;
}

我的jQuery

   $(window).resize(function(){
 if($(window).width() <= 700){
   $("#list").removeClass("justisfy-content-end");
   $("#list").addClass("justisfy-content-center");
 } 
});

Answer 1

试试这个＆gt;＆gt;＆gt;

    <a id="name" href="#">Jasmine Parson</a>
     <ul id="list" class="nav justify-content-end">
      <li class="nav-item">
       <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
       <a  id="mid" class="nav-link" href="#">Work</a>
      </li>
      <li class="nav-item">
       <a class="nav-link" href="#">Contact</a>
     </li>
    </ul>

//CSS
    #boostrap-overrides ul {
     flex-wrap: nowrap;

    }

    .center {
     text-align: center;
    }
    .justify-content-end li{
    float:left;
    }
    ul {
     float:right;   
     display: inline;
     line-height: 15px;
     margin: 0 auto;
    }

//JS
     if($(window).width() <= 700){
       $("#list").removeClass("justisfy-content-end");
       $("#list").addClass("justisfy-content-center");
     } 
    });

调整大小时的标题和ul

1 个答案: