引导导航栏不对齐响应

问题描述：

我已经编码为我的个人作品集网站导航栏一个，看起来在电脑屏幕上巨大的，但是当我打开它在移动设备上的菜单项趋于水平堆叠和只是一般情况下，我怎么能得到这个在所有设备上看起来不错？我很新的编码，所以任何帮助将不胜感激！引导导航栏不对齐响应

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

答

您正在使用引导的导航栏，并试图将其覆盖。但似乎你在“覆盖”它;-)。我在你的css文件中修改了几件事情。看看这些变化，并有一些想法来解决你的问题。你可以在你的CSS中做相应的修改。以下是codepen链接。谢谢。

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

答

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

而且我同意Kalpesh Patel的说法，这里有一些混淆。虽然我是新手，但我认为为相同大小的列设置两个断点定义可能是多余的。该文档非常有用，可以检查断点上的文档并更改屏幕大小以测试它们的示例：https://getbootstrap.com/docs/4.0/layout/grid/#all-breakpoints。

而且黑石数字对他们的github账户的全部网站的一些真正有用的模板。

最佳，

引导导航栏不对齐响应

相关推荐