[英]Bootstrap 3 Navbar toggle - collapses but button does not appear
我不知道我在這里做錯了什么,但我認為這是一件非常愚蠢的事情。
我在Umbraco 6.0.5中使用Bootstrap 3並且我無法讓切換工作調整大小 - 在770px寬度下導航器折疊但是沒有按鈕可以切換它,或者更確切地說是存在的東西,如代碼和Firebug中所示,但在Chrome和Firefox中沒有看到(尚未嘗試IE)。
下面有一個小提琴和代碼。 我正在使用http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js,http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap 。小提琴中的min.js和http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css 。
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href"#">reech</a>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav">
<li><a href="/" class="selected">Home</a></li>
<li class=" dropdown">
<a href="/what-is-reech.aspx" class=" dropdown-toggle" data-hover="dropdown" rel="">What is reech? <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/what-is-reech/about-this-site.aspx" rel="">About this site</a></li>
</ul>
</li>
<li class=" dropdown">
</li>
<li><a href="/key-reech-projects.aspx" class="" rel="">Key reech projects</a></li>
<li class=" dropdown">
</li>
<li><a href="/technologies.aspx" class="" rel="">Technologies</a></li>
<li class=" dropdown">
</li>
<li><a href="/complementary-activities.aspx" class="" rel="">Complementary Activities</a></li>
<li class=" dropdown">
<a href="/news.aspx" class=" dropdown-toggle" data-hover="dropdown" rel="">News <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/news/merseyside-collective-switching-scheme-launched.aspx" rel="">Merseyside collective switching scheme launched</a></li>
<li><a href="/news/reech-scoops-top-award.aspx" rel="">reech scoops top award</a></li>
<li><a href="/news/reech-award-nomination.aspx" rel="">reech award nomination</a></li>
<li><a href="/news/green-deal-and-energy-company-obligation-(eco)-september-2013-statistics.aspx" rel="">Green Deal and Energy Company Obligation (ECO) September 2013 Statistics</a></li>
<li><a href="/news/energy-switching-scheme.aspx" rel="">Energy Switching Scheme</a></li>
<li><a href="/news/project-reeches-new-milestone.aspx" rel="">Project 'reeches' new milestone</a></li>
<li><a href="/news/firms-sign-up-for-new-opportunities.aspx" rel="">Firms sign up for new opportunities</a></li>
<li><a href="/news/14-new-jobs-created-for-merseyside-residents.aspx" rel="">14 new jobs created for Merseyside residents</a></li>
<li><a href="/news/reeching-out-to-low-carbon-and-green-energy-sector.aspx" rel="">'reeching' out to Low Carbon and Green Energy Sector</a></li>
</ul>
</li>
<li class=" dropdown">
</li>
<li><a href="/reech-into-business.aspx" class="" rel="">reech into business</a></li>
<li class=" dropdown">
<a href="/reech-partners.aspx" class=" dropdown-toggle" data-hover="dropdown" rel="">reech partners <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/reech-partners/reech-steering-group.aspx" rel="">reech Steering Group</a></li>
</ul>
</li>
</ul>
</div><!--close navbar-collapse-->
</div><!--close container-->
</nav><!--Close nav-->
更新 - 所以,我嘗試改變數據目標(並改變了小提琴 )到#main-nav和id到main-nav,沒有快樂。 我嘗試在按鈕> span元素中添加一個破折號字符,它可以工作。 也就是說,破折號顯示,我可以切換菜單。 但是圖標欄在哪里?
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar">-</span>
<span class="icon-bar">-</span>
<span class="icon-bar">-</span>
</button>
並將<nav class="navbar">
更改為<nav class="navbar navbar-default">
Bootstrap - 切換按鈕不會在移動視圖中顯示
FIX:在以下位置進行以下更改:bootstrap.min.css
.navbar-toggle
{
position:relative;
float:right;
padding:9px 10px;
margin-top:8px;
margin-right:15px;
margin-bottom:8px;
background-color:transparent;
background-image:none;
border-radius:4px
}
加
border:1px solid #444;
(更改顏色代碼以符合您的設計)
.navbar-toggle
{
position:relative;
float:right;
padding:9px 10px;
margin-top:8px;
margin-right:15px;
margin-bottom:8px;
background-color:transparent;
background-image:none;
border:1px solid #444; /* added line */
border-radius:4px
}
.icon-bar
{
display:block;
width:22px;
height:2px;
border-radius:1px;
}
加
border:1px solid #444;
(更改顏色代碼以符合您的設計)
.icon-bar
{
display:block;
width:22px;
height:2px;
border-radius:1px;
border:1px solid #444;
}
這應該讓你指出正確的方向。 看起來你的主要打嗝是你的按鈕數據目標屬性是引用一個類而不是一個ID。 在這種情況下最好使用ID,所以如果你在代碼中的其他地方調用該類,你就不會在javascript中拋出曲線球。
我還看到你有幾個空白的<li class="dropdown"></li>
。 我不確定這是否是故意的,但我會參考我所附的結構。
希望這對你有用,祝你好運!
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="#">Reech</a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown"> <a href="/what-is-reech.apsx" class="dropdown-toggle" data-toggle="dropdown">What is reech? <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/what-is-reech/about-this-site-aspx">About this site</a></li>
</ul>
</li><!-- dropdown -->
<li class="dropdown"> <a href="/what-is-reech.apsx" class="dropdown-toggle" data-toggle="dropdown">Key reech projects <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/technologies.apsx">Technologies</a></li>
<li><a href="/complementary-activities.apsx">Complementary Activities</a></li>
</ul>
</li><!-- dropdown -->
<li class="dropdown"> <a href="/what-is-reech.apsx" class="dropdown-toggle" data-toggle="dropdown">Key reech projects <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/technologies.apsx">Technologies</a></li>
</ul>
</li><!-- dropdown -->
</ul><!-- nav navbar-nav -->
</div><!-- collapse navbar-collapse -->
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
在你的第一行
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
它應該是data-target="#nav-collapse"
因為你有<div class="collapse navbar-collapse" id="nav-collapse">
其中id是nav-collapse
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.