2013-02-25 55 views
0

使用自助2.2我有以下問題:引導響應佈局不正常工作

當我拉近我與響應式佈局Firefox窗口,在導航欄消失,我在正確的得到一個按鈕轉角。但點擊該按鈕不會執行任何操作(通常,該菜單應該彈出)。

我複製此HTML:

http://www.w3resource.com/twitter-bootstrap/example-responsive-design-with-twitter-bootstrap.html

,我換成下面的CSS和JS進口:

<link href="bootstrap/css/bootstrap.css" rel="stylesheet"> 
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> 
<script src="bootstrap/js/bootstrap.js"></script> 

這是標準的CSS和JS文件哪一個時變下載Bootstrap。 CSS和bootstrap.js正確加載。

的bootstrap.js確實包含了塌陷斷面(我已經粘貼下面的那部分)

有沒有人有任何想法,爲什麼在按鈕上單擊崩潰後不會有什麼影響?

我使用的是Firefox 18.0.2,響應式佈局在打開其他網站時起作用。

非常感謝

bootstrap.js塌陷部分:

/* ============================================================= 
* bootstrap-collapse.js v2.2.2 
* http://twitter.github.com/bootstrap/javascript.html#collapse 
* ============================================================= 
* Copyright 2012 Twitter, Inc. 
* 
* Licensed under the Apache License, Version 2.0 (the "License"); 
* you may not use this file except in compliance with the License. 
* You may obtain a copy of the License at 
* 
* http://www.apache.org/licenses/LICENSE-2.0 
* 
* Unless required by applicable law or agreed to in writing, software 
* distributed under the License is distributed on an "AS IS" BASIS, 
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
* See the License for the specific language governing permissions and 
* limitations under the License. 
* ============================================================ */ 


!function ($) { 

    "use strict"; // jshint ;_; 


/* COLLAPSE PUBLIC CLASS DEFINITION 
    * ================================ */ 

    var Collapse = function (element, options) { 
    this.$element = $(element) 
    this.options = $.extend({}, $.fn.collapse.defaults, options) 

    if (this.options.parent) { 
     this.$parent = $(this.options.parent) 
    } 

    this.options.toggle && this.toggle() 
    } 

    Collapse.prototype = { 

    constructor: Collapse 

    , dimension: function() { 
     var hasWidth = this.$element.hasClass('width') 
     return hasWidth ? 'width' : 'height' 
    } 

    , show: function() { 
     var dimension 
     , scroll 
     , actives 
     , hasData 

     if (this.transitioning) return 

     dimension = this.dimension() 
     scroll = $.camelCase(['scroll', dimension].join('-')) 
     actives = this.$parent && this.$parent.find('> .accordion-group > .in') 

     if (actives && actives.length) { 
     hasData = actives.data('collapse') 
     if (hasData && hasData.transitioning) return 
     actives.collapse('hide') 
     hasData || actives.data('collapse', null) 
     } 

     this.$element[dimension](0) 
     this.transition('addClass', $.Event('show'), 'shown') 
     $.support.transition && this.$element[dimension](this.$element[0][scroll]) 
    } 

    , hide: function() { 
     var dimension 
     if (this.transitioning) return 
     dimension = this.dimension() 
     this.reset(this.$element[dimension]()) 
     this.transition('removeClass', $.Event('hide'), 'hidden') 
     this.$element[dimension](0) 
    } 

    , reset: function (size) { 
     var dimension = this.dimension() 

     this.$element 
     .removeClass('collapse') 
     [dimension](size || 'auto') 
     [0].offsetWidth 

     this.$element[size !== null ? 'addClass' : 'removeClass']('collapse') 

     return this 
    } 

    , transition: function (method, startEvent, completeEvent) { 
     var that = this 
     , complete = function() { 
      if (startEvent.type == 'show') that.reset() 
      that.transitioning = 0 
      that.$element.trigger(completeEvent) 
      } 

     this.$element.trigger(startEvent) 

     if (startEvent.isDefaultPrevented()) return 

     this.transitioning = 1 

     this.$element[method]('in') 

     $.support.transition && this.$element.hasClass('collapse') ? 
     this.$element.one($.support.transition.end, complete) : 
     complete() 
    } 

    , toggle: function() { 
     this[this.$element.hasClass('in') ? 'hide' : 'show']() 
    } 

    } 


/* COLLAPSE PLUGIN DEFINITION 
    * ========================== */ 

    var old = $.fn.collapse 

    $.fn.collapse = function (option) { 
    return this.each(function() { 
     var $this = $(this) 
     , data = $this.data('collapse') 
     , options = typeof option == 'object' && option 
     if (!data) $this.data('collapse', (data = new Collapse(this, options))) 
     if (typeof option == 'string') data[option]() 
    }) 
    } 

    $.fn.collapse.defaults = { 
    toggle: true 
    } 

    $.fn.collapse.Constructor = Collapse 


/* COLLAPSE NO CONFLICT 
    * ==================== */ 

    $.fn.collapse.noConflict = function() { 
    $.fn.collapse = old 
    return this 
    } 


/* COLLAPSE DATA-API 
    * ================= */ 

    $(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) { 
    var $this = $(this), href 
     , target = $this.attr('data-target') 
     || e.preventDefault() 
     || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7 
     , option = $(target).data('collapse') ? 'toggle' : $this.data() 
    $this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed') 
    $(target).collapse(option) 
    }) 

`

+0

您是否知道bootstrap已更新至2.3.0?請升級 – Shail 2013-02-25 12:00:09

+0

謝謝,我更新了它,但仍然有同樣的問題 – ProfHase85 2013-02-25 12:32:29

+0

可以檢查解決方案。讓我知道它是否適合你 – Shail 2013-02-25 12:44:12

回答

0

創建引導下列方式響應菜單:用的jsfiddle導航Navigation bootstrap
注意:您有不包括jQuery文件到您的HTML頁面,使用以下方式:

<link href="bootstrap/css/bootstrap.css" rel="stylesheet"> 

<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> 

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 

<script src="bootstrap/js/bootstrap.js"></script> 

<div class="navbar"> 
<div class="navbar-inner"> 
    <a data-toggle="collapse" data-target=".nav-collapse" class="btn btn-navbar"> 
    <i class="icon-bar"></i> 
    </a> 

<a class="brand" href="">New Icon Menu</a> 

    <div class="nav-collapse"> 
     <ul class="nav nav-pills pull-right"> 
      <li><a href=""><i class="icon-home icon-2x"></i> Home<br></a> 
      </li> 
      <li><a href=""><i class=" icon-pencil icon-2x"></i>About Us</a> 
      </li> 
      <li><a href=""><i class=" icon-briefcase icon-2x"></i>Portfolio</a> 
      </li> 
      <li><a href=""><i class=" icon-envelope icon-2x"></i>Contact Us</a> 
      </li> 
     </ul> 
    </div> 
    </div> 
</div> 
+0

非常感謝。這一長串包含讓我忽略了jquery。 我想知道爲什麼bootstrap球員不直接在bootstrap.js中包含jquery ... – ProfHase85 2013-02-25 13:22:16

+0

這是因爲它保持單獨不是由嘰嘰喳喳球員,它會複雜的事情,這種方式。使用cdn版本來引導css,js甚至jquery。這將有助於您獲得良好的響應時間。 – Shail 2013-02-25 13:24:15