引導導航欄不對齊響應

我已經編碼爲我的個人作品集網站導航欄一個，看起來在電腦屏幕上巨大的，但是當我打開它在移動設備上的菜單項趨於水平堆疊和只是一般情況下，我怎麼能得到這個在所有設備上看起來不錯？我很新的編碼，所以任何幫助將不勝感激！引導導航欄不對齊響應

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

來源

2017-09-24 Joseph Bowditch

您正在使用引導的導航欄，並試圖將其覆蓋。但似乎你在「覆蓋」它;-)。我在你的css文件中修改了幾件事情。看看這些變化，並有一些想法來解決你的問題。你可以在你的CSS中做相應的修改。以下是codepen鏈接。謝謝。

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

來源

2017-09-24 17:49:39

我對bootstrap也很新穎！我建議切換到導航欄切換器，並摺疊移動模式：https://getbootstrap.com/docs/4.0/components/navbar/#toggler 在文檔中有一些很好的例子，您可以複製，粘貼和修改。

而且我同意Kalpesh Patel的說法，這裏有一些混淆。雖然我是新手，但我認爲爲相同大小的列設置兩個斷點定義可能是多餘的。該文檔非常有用，可以檢查斷點上的文檔並更改屏幕大小以測試它們的示例：https://getbootstrap.com/docs/4.0/layout/grid/#all-breakpoints。

而且黑石數字對他們的github賬戶的全部網站的一些真正有用的模板。

最佳，

來源

2017-09-24 21:06:04

引導導航欄不對齊響應

回答

相關問題