如何调整PC端和移动端Bootstrap导航菜单的位置？

嘿，我来帮你搞定这个Bootstrap导航的位置调整问题！首先得提醒你一下：你目前只引入了Bootstrap的JS脚本，还缺了核心的Bootstrap CSS文件，得先补上，不然导航的基础样式会乱掉。接下来分PC和移动端的需求给你具体方案：

1. 先补全导航的基础结构和必要文件 #

首先把你的HTML补全完整的<nav>容器，同时加上Bootstrap的CSS引用（放在<head>里）：

<head>
  <!-- 必须引入Bootstrap CSS，不然导航样式会失效 -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo here</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">☰</button>
  <div class="collapse navbar-collapse" id="navbar-collapse">
    <!-- 给ul加个自定义类custom-nav，方便后续调整样式 -->
    <ul class="nav navbar-nav ml-auto custom-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>

2. PC端：让导航菜单向右偏移更远 #

你已经用了ml-auto让菜单默认右对齐，要让它再往右挪一段距离，只需要给自定义的.custom-nav类加个右侧外边距，用媒体查询针对PC端（Bootstrap的lg断点是992px）设置：

/* PC端（屏幕宽度≥992px）生效 */
@media (min-width: 992px) {
  .custom-nav {
    margin-right: 3rem; /* 数值可以自己调，比如2rem、4rem，按需选择 */
  }
}

3. 移动端：让菜单链接靠右对齐 #

移动端折叠菜单展开后默认是左对齐的，我们可以给菜单容器设置文本右对齐，这样所有链接都会靠右：

/* 移动端（屏幕宽度<992px）生效 */
@media (max-width: 991px) {
  .navbar-collapse .custom-nav {
    text-align: right;
  }
}

整合所有样式 #

把上面的CSS放在<style>标签里，放在HTML的<head>或者</body>之前都可以：

<style>
/* PC端菜单右移更远 */
@media (min-width: 992px) {
  .custom-nav {
    margin-right: 3rem;
  }
}

/* 移动端菜单链接靠右 */
@media (max-width: 991px) {
  .navbar-collapse .custom-nav {
    text-align: right;
  }
}
</style>

小提示 #

• margin-right的数值可以根据你的布局需求随意调整，越大偏移越远；
• 如果移动端你想让每个链接的点击区域也完全靠右，可以给.nav-item加justify-content: flex-end，不过一般text-align: right就够用了。

内容的提问来源于stack exchange，提问作者user9131141