在其他设备上查看时，引导导航栏没有响应对齐答案

【问题标题】：Bootstrap navbar not aligning responsively when veiwing on other devices在其他设备上查看时，引导导航栏没有响应对齐
【发布时间】：2017-09-25 05:06:04
【问题描述】：

我一直在为我的个人作品集网站编写导航栏，它在计算机屏幕上看起来很棒，但是当我在移动设备上打开它时，菜单项往往会水平堆叠并且通常会脱节，我该怎么做让它在所有设备上看起来都不错？我对编码很陌生，所以任何帮助都将不胜感激！

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

【问题讨论】：

标签： html css twitter-bootstrap responsive-design navbar

【解决方案1】：

您正在使用引导程序的导航栏并试图覆盖它。但似乎你在“覆盖”它;-)。我在你的 css 文件中修改了一些东西。看看这些变化，并有一些想法来解决您的问题。您可以在您的 css 中进行相应的更改。下面是codepen链接。谢谢。

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

【讨论】：

【解决方案2】：

我对引导程序也很陌生！我建议切换到导航栏切换器，并为移动设备折叠模式：https://getbootstrap.com/docs/4.0/components/navbar/#toggler 那里的文档中有一些很好的示例，您几乎可以复制、粘贴和修改它们。

我同意 Kalpesh Patel 的观点，即有些过度造型正在发生。虽然我是新手，但我认为为相同大小的列定义两个断点可能是多余的。该文档非常有用，请查看有关断点的文档并更改屏幕大小以测试它们的示例：https://getbootstrap.com/docs/4.0/layout/grid/#all-breakpoints。

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

最好的，

【讨论】：