我創建一個網站使用Twitter引導2.0.4 + bootstraps responsive.css。我不知道的是:是否有可能在站點左上角出現徽標,並且徽標右側出現導航欄(但固定在頂部)?在改變大小的同時,Logo應該出現在導航欄的頂部。更改引導2.0.4響應的導航欄寬度
會很高興得到一個答案,我還沒有發現任何有用的東西。
問候, 多米尼克
編輯:這是我描述要達到什麼樣的一個畫面:左邊http://i.imgur.com/HX3ZM.png
標誌,然後導航欄。
我創建一個網站使用Twitter引導2.0.4 + bootstraps responsive.css。我不知道的是:是否有可能在站點左上角出現徽標,並且徽標右側出現導航欄(但固定在頂部)?在改變大小的同時,Logo應該出現在導航欄的頂部。更改引導2.0.4響應的導航欄寬度
會很高興得到一個答案,我還沒有發現任何有用的東西。
問候, 多米尼克
編輯:這是我描述要達到什麼樣的一個畫面:左邊http://i.imgur.com/HX3ZM.png
標誌,然後導航欄。
好的,我明白了。我使用了固定的導航欄,但沒有像預期的那樣工作。你必須使用靜態導航欄。然後,你可以從引導中使用行/腳手架系統。從導航欄留下了標誌
示例代碼:
<div class="row-fluid">
<div class="span3">
<p><img src="/sites/img/your_logo.png" alt="Logo" class="responsive-logo"></p>
</div>
<div class="span9">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i> Username
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li class="divider"></li>
<li><a href="#">Sign Out</a></li>
</ul>
</div>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</div><!-- end navbar -->
</div><!-- end span8 -->
</div><!-- end row -->
爲了讓我的標誌迴應,我添加了下面的CSS規則:
.responsive-logo {
max-width: 100%;
height: auto;
border: 0;
padding-top: 10px;
}
是的,當然,您需要重新構建文檔以放置(例如)導航欄上方span4類的div。
下面,有導航欄代碼並刪除品牌元素(它通常容納您的標誌)。我的假設使我相信你想要的東西是這樣的:
如果你能成爲一個更具體一點你想要什麼,和/或提供您的網站的相關部分(HTML),我可以可能會給一些更多的方向。
謝謝您的回答,我只是製作了一張描述我想要實現的圖片:http://i.imgur.com/HX3ZM.png徽標應該出現在左邊,下邊有一個邊欄,右邊(藍色的東西;))側邊欄內容如下。當調整到非常低的視口時,徽標應該只出現在側邊欄的頂部(但這不是主要問題)。我不知道如何將徽標放在側邊欄左側,但位於同一「行」中。 – Dominik 2012-07-12 07:43:03