html - 在其他设备上查看时，Bootstrap 导航栏没有响应地对齐

Question

我一直在为我的个人投资组合网站编写一个导航栏，它在电脑屏幕上看起来很棒，但是当我在移动设备上打开它时，菜单项往往会水平堆叠，而且通常会脱节，我怎么能让它在所有设备上看起来都不错？我是编码的新手，所以任何帮助将不胜感激!

https://codepen.io/Bowdoo95/pen/PJzZVp

HTML

<div class="container-fluid">
  <div class="row">
    <nav id="nav" class="navbar navbar-default navbar-fixed-top">
      <div class="col-md-3 col-sm-3">
        <a id="name" href="#"><b>Joseph Bowditch</b></h5></a>
      </div>
      <div class="col-md-7 col-sm-7">
        <ul id="menu-items" class="nav navbar-nav navbar-right">
          <li class="active"><a class="home" href="#page-one"><b>Home</b></a></li>
          <li><a class="portfolio" href="#page-two"><b>Portfolio</b></a></li>
          <li><a class="about-me" href="#page-three"><b>About Me</b></a></li>
        </ul>
      </div>
      <div class="col-md-2 col-sm-2">
        <a href="#page-four" id="contact-me" class="btn navbar-btn" role="button"><b>Contact Me</b></a>
      </div>
    </nav>
  </div>
</div>

CSS

#name{
  color:#FFF;
  float:left;
  padding-top:5%;
}
#nav{
  background-color: transparent;
  border-color:transparent;
  margin: 0px;
  border-radius: 0px;
  text-transform: uppercase;
}
.navbar-default .navbar-nav > li > a{
  color:#FFF;
  padding-top:18px;
}
.navbar-btn{
  border: 3px solid #FFF;
  text-transform:uppercase;
  background-color:transparent;
  color:#FFF;
  float:right;
}
#menu-items{
  margin-right:-100px !important;
}

Answer 1

您正在使用 Bootstrap 的导航栏并试图覆盖它。但似乎你过度“覆盖”了它;-)。我已经修改了您的 css 文件中的一些内容。查看这些更改并了解如何解决您的问题。您可以在您的 css 中进行相应的更改。以下是代码笔链接。谢谢。

"https://codepen.io/kapu9899/pen/JrbMmB"