Question

我一直在为我的个人投资组合网站编写一个导航栏，它在电脑屏幕上看起来很棒，但是当我在移动设备上打开它时，菜单项往往会水平堆叠而且通常会脱节，如何我可以在所有设备上看起来都不错吗？我对编码很陌生，所以任何帮助都会受到赞赏！

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的导航栏并尝试覆盖它。但似乎你已超过＆＃34;覆盖＆＃34;它;-)。我已经修改了你的css文件中的几件东西。看看这些变化，并有一些想法来解决您的问题。您可以在css中进行相应的更改。下面是codepen链接。感谢。

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

Answer 2

我对bootstrap也很新！我建议切换到导航栏切换器，然后折叠移动模式：https://getbootstrap.com/docs/4.0/components/navbar/#toggler 在那里的文档中有一些很好的例子，你几乎可以复制，粘贴和修改。

我同意Kalpesh Patel的说法，有一些情况正在发生。虽然我是新手，但我认为对于具有相同大小的列有两个断点定义可能是多余的。文档非常有用，请查看断点上的文档并更改屏幕大小以测试其示例：https://getbootstrap.com/docs/4.0/layout/grid/#all-breakpoints。

Blackrock Digital还为其github帐户上的完整网站提供了一些非常有用的模板。

最佳，

在其他设备上进行静态扫描时，Bootstrap导航栏无法正确对齐

2 个答案: