Twitter的引導3佈局問題

我全新的自舉3，我試圖實現一個頭，看起來像以下：Twitter的引導3佈局問題

正如你可以看到這裏有幾個部分組成：

Logo;左對齊
菜單項的徽標右側
在右上角的一天（MOTD）
「嗨，用戶名！」，右對齊
「信封」的消息Glyphicon的用戶名左側
「心」 Glyphicon到信封Glyphicon左側（在它上面的圖片是一個明星，但它應該是一個心臟）

這是我jsFiddle代表我的最好的嘗試，這裏是小提琴的主要<body>元素：

<!DOCTYPE html> 
<html> 
<head> 
    <!-- Stuff goes here --> 
</head> 
<body> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#">Logo</a> 
      </div> 
      <div id="navbar" class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Menu 1 | Menu 2 | Menu 3</a></li> 
        <li class="active"><a href="#">This is the message of the day up here!</a></li> 
        <li class="active"><a href="#"><span class="glyphicon glyphicon-heart"></span></a></li> 
        <li class="active"><a href="#"><span class="glyphicon glyphicon-envelope"></span></a></li> 
        <li class="active"><a href="#">Hi, smeeb!</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</body> 
</html>

當我的jsfiddle運行這個，沒有什麼是正確的佈局，我甚至不能看到大部分的<li>元素。任何想法，我要去哪裏錯誤？

來源

2015-10-13 smeeb

U可以從這裏開始，他們提供了很多關於bootstrap的文檔http://getbootstrap.com/components/ – Lozeputten

你可以使用這個標記，並根據你的CSS風格。使菜單左側和其他人的名字和圖標右側菜單。然後分離最上面的消息並將其絕對定位到父導航欄相對位置。

<div id="navbar" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Menu 1 </a></li> 
       <li class="active"><a href="#">Menu 2</a></li> 
       <li class="active"><a href="#">Menu </a></li>   
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="active"><a href="#"><span class="glyphicon glyphicon-heart"></span></a></li> 
       <li class="active"><a href="#"><span class="glyphicon glyphicon-envelope"></span></a></li> 
       <li class="active"><a href="#">Hi, smeeb!</a></li> 
      </ul> 
     </div> 
     <div><a href="#">This is the message of the day up here!</a></div>

來源

2015-10-13 17:34:33 Arun

將類「navbar-collapse」放在帶有id屬性「navbar」的div中的類「in」後面。使用「in」類，您的導航欄將開始可見。

<!DOCTYPE html> 
<html> 
<head> 
    <!-- Stuff goes here --> 
</head> 
<body> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#">Logo</a> 
      </div> 
      <div id="navbar" class="collapse navbar-collapse in"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Menu 1 | Menu 2 | Menu 3</a></li> 
        <li class="active"><a href="#">This is the message of the day up here!</a></li> 
        <li class="active"><a href="#"><span class="glyphicon glyphicon-heart"></span></a></li> 
        <li class="active"><a href="#"><span class="glyphicon glyphicon-envelope"></span></a></li> 
        <li class="active"><a href="#">Hi, smeeb!</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</body> 
</html>

來源

2015-10-13 17:43:16

好吧，我在更小的設備作爲東西「SCOOT運行越來越下降投票這裏的風險，但是從設計的角度來看，你可以在導航欄的「每日新聞」遇到問題，尤其是當在」。

我可以建議在導航欄上方有一個頂欄嗎？

<div class="top-bar-wrap"> 
 
    <div class="container"> 
 
     <div class="top-bar"> 
 
      <div class="pull-right"> <!-- This will keep your quote to the right. Just change it to pull-left if if you want it to start from the left. --> 
 
       <p>Quote of the day</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

然後你會被釋放到旁邊的鏈接你的資產淨值和圖標。只需確保將「navbar-right」添加到保存您的li項目的導航欄中即可。如果你願意，你可以添加這些gliph作爲li項目，或者你可以在你的CSS中添加一個 - display：inline - 屬性並且應該可以工作。儘管如此，我可以再提一點嗎？

作爲設計師第一個來到開發的黑暗面......顯示用戶名的圖標和代碼也可能在導航下面的欄中得到最好的服務。您可以複製「頂欄」部分的代碼並將其置於您的導航欄下方。

/* For the topbar above the nav */ 
 
.top-bar-wrap { 
 
    padding: 6px 0; 
 
    background-color: #333; } 
 

 
.top-bar { 
 
    min-height: 20px; 
 
    line-height: 20px; } 
 

 
/* For the bar just below the nav "Member-bar" */ 
 
.member-bar-wrap { 
 
    padding: 6px 0; 
 
    background-color: #333; } 
 

 
.member-bar { 
 
    min-height: 20px; 
 
    line-height: 20px; }

<div class="member-bar-wrap"> 
 
    <div class="container"> 
 
     <div class="member-bar"> 
 
      <div class="pull-right"> 
 
      
 
      <!-- Gliphs and code for your member name display --> 
 
      
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

這將讓一切漂亮整潔，而且你會不會碰上小屏幕的問題。

來源

2015-10-13 18:41:02

@smeeb，你是否設法把它整理出來？ –

澄清...按照我建議的方式，您可以確保您的頂欄和成員欄與您的導航欄顏色相同。從導航欄/導航欄刪除任何邊框或邊距將使其看起來像一個導航欄。不同之處在於，一旦菜單縮小，強制進入手風琴風格，您就不會在手機上丟失報價或會員圖標/名稱。這樣，如果您希望您的圖標在將來的任何時候顯示通知，警報img將不會隱藏在手風琴中。 –

Twitter的引導3佈局問題

回答

相關問題