如何設計Bootstraps collapsable Navbar？

我製作了一個使用bootstrap的網站，對這個框架我不太瞭解。我遇到的難題是造型navbar。如何設計Bootstraps collapsable Navbar？

我想要做的是將名稱和三個標題'work'，'about'和'contact'移動到頁面的左側角落，然後將社交媒體圖標移動到右側頁面的一角。有人能指導我如何在保留引導程序提供的功能的同時做到這一點嗎？

這裏是一個的jsfiddle：https://jsfiddle.net/3kq7ptxd/

的的jsfiddle看起來與實際網站不同，因此，如果你去paulopinzon.com你也許會得到什麼，我試圖更清晰的想法。

感謝您花時間！我會嘗試在同一時間嘗試一些事情，但如果有更多經驗的人可以提供幫助，我們將非常感激。

有一個好的一天

HTML：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<link href="css/yourCustom.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
<nav role="navigation" class="navbar navbar-default navbar-static-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 

    </button> <a href="index.html" class="navbar-brand" style="color:#000000">Paulo Pinzon-Iradian</a> 

    </div> 
    <div id="navbarCollapse" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="work.html" style="color:#000000; margin-left:1.5em;">Work</a> 

     </li> 
     <li><a href="about.html" style="color:#000000; margin-left:1.5em;">About</a> 

     </li> 
     <li><a href="contact.php" style="color:#000000; margin-left:1.5em;">Contact</a> 

     </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a target="_blank" href="https://www.facebook.com/pages/Paulo-Pinzon-Iradian/849542288428399" style="color:#3b5197;"><i class="fa fa-facebook-square"></i></a> 
     </li> 
     <li><a target="_blank" href="https://instagram.com/paulopinzonart/" style="color:#125688;"><i class="fa fa-instagram"></i></a> 
     </li> 
     <li><a target="_blank" href="https://twitter.com/PauloPinzonArt" style="color:#00c7f4;"><i class="fa fa-twitter-square"></i></a> 
     </li> 

     </ul> 
    </div> 
    </div> 
</nav>

來源

2015-11-05 ppinzon

嘗試此鏈接.. http://stackoverflow.com/questions/13903981/how-to-align-brand-title-and-links- left-in-bootstrap-navbar – bakki

更改導航欄.container到.container-fluid。

基本上.container-fluid不斷重新調整視口的大小，並且不會在邊上留下額外的空白空間，這與.container不同。

.container-fluid具有CSS屬性寬度：100%;，所以它不斷重新調整每個屏幕寬度的粒度。

<nav role="navigation" class="navbar navbar-default navbar-static-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 

     </button> <a href="index.html" class="navbar-brand" style="color:#000000">Paulo Pinzon-Iradian</a> 

    </div> 
    <div id="navbarCollapse" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="work.html" style="color:#000000; margin-left:1.5em;">Work</a> 

     </li> 
     <li><a href="about.html" style="color:#000000; margin-left:1.5em;">About</a> 

     </li> 
     <li><a href="contact.php" style="color:#000000; margin-left:1.5em;">Contact</a> 

     </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a target="_blank" href="https://www.facebook.com/pages/Paulo-Pinzon-Iradian/849542288428399" style="color:#3b5197;"><i class="fa fa-facebook-square"></i></a> 
     </li> 
     <li><a target="_blank" href="https://instagram.com/paulopinzonart/" style="color:#125688;"><i class="fa fa-instagram"></i></a> 
     </li> 
     <li><a target="_blank" href="https://twitter.com/PauloPinzonArt" style="color:#00c7f4;"><i class="fa fa-twitter-square"></i></a> 
     </li> 

     </ul> 
    </div> 
    </div> 
</nav>

CODEPEN DEMO

來源

2015-11-05 21:49:24

This Works！這很有趣，因爲在我嘗試在css中將寬度更改爲100％之前，這並不奏效。所以謝謝！如果它們離左右太遠，是否只使用padding-left：5px等？還是有另一種方法？ – ppinzon

爲了將來的參考，你可以用自己的CSS覆蓋引導CSS，但你必須在引導後添加你的CSS文件，以便它解析後。 –

您可能需要考慮使用百分比值作爲填充，因爲5px在不同的屏幕寬度上看起來會有所不同。 –

嘗試下面的代碼添加到您的CSS樣式，這樣做是你想要的是什麼？

nav .container { 
    margin: 0 auto; 
    width: 100%; 
}

來源

2015-11-05 21:49:36

好吧，我只是試過，但沒有奏效，他們住在同一個地方 – ppinzon

從 <nav role="navigation" class="navbar navbar-default navbar-static-top"> <div class="container"> 到

<nav role="navigation" class="navbar navbar-default navbar-static-top"> 
    <div class="container-fluid">

來源

2015-11-05 21:58:25 bakki

如何設計Bootstraps collapsable Navbar？

回答

相關問題