天道酬勤,学无止境

twitter bootstrap 下拉菜单在它应该关闭的时候不会关闭(twitter bootstrap dropdown doesn't toggle closed when it should)

问题

哦,伙计,我一直在为此而撕心裂肺。 4 小时下拉菜单。

我正在使用 Twitter Bootstrap。

顶部的固定导航有一个下拉菜单,非常标准的东西。

除了下拉菜单不会像通常那样关闭。 它只会在按下开关本身时切换打开和关闭,而不是在按下菜单中的项目或用户在菜单外单击时(这两者都应该关闭下拉菜单)。

我做的唯一非标准的事情是我使用了 iframe 和 bootswatch 的主题。

我以前没有遇到过这样的问题,所以我觉得这可能是一个错误(今天将引导程序升级到 2.1.0,将 jquery 升级到 1.7.2)。

这里的所有代码:

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
        <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
        <!-- Le styles -->
        <link href="./css/bootstrap.css" rel="stylesheet">
        <style>
            iframe {
                border: 0px;
                height: 95%;
                left: 0px;
                position: absolute;
                top: 50px;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="brand" target="mainframe" href="./home.html">
                       Brand
                    </a>
                    <ul class="nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" role="button" data-toggle="dropdown">
                                <i class="icon-pencil icon-white"></i>
                                Sample
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li>
                                    <a target="mainframe" href="./home.html#">One</a>
                                </li>
                                <li>
                                    <a target="mainframe" href="./home.html#">Two</a>
                                </li>
                                <li>
                                    <a target="mainframe" href="./home.html#">Three</a>
                                </li>
                                <li>
                                    <a target="_blank" href="#">Four
                                        <i class="icon-share-alt"></i>
                                    </a>
                                </li>
                                <li>
                                    <a target="_blank" href="#">Five
                                        <i class="icon-share-alt"></i>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">
                                <i class="icon-certificate icon-white"></i>Stuff</a></li>
                        <li>
                            <a href="#">
                                <i class="icon-globe icon-white"></i>Things</a></li>
                        <li>
                            <a target="mainframe" href="./home.html">
                                <i class="icon-film icon-white"></i>Nothing</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container">
            <iframe id="frame" name="mainframe" src="./home.html"></iframe>
            <!-- /container -->
        </div>
        <!-- Le javascript==================================================-->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

        <script src="./js/bootstrap.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.dropdown-toggle').dropdown();
                var frameheight = window.innerHeight - 50;
                document.getElementById("frame").style.height = frameheight + "px";
            });

            $(window).resize(function () {
                var frameheight = window.innerHeight - 50;
                document.getElementById("frame").style.height = frameheight + "px";
            });
        </script>
    </body>
</html>

住在这里:http://www.joshlevent.com/dropdownbug/

回答1

默认情况下,iframe 不会将点击事件传播到其父级。 您需要添加代码来手动执行此操作。 除了能够编辑您正在加载的 iframe 的内容之外,跨域限制还要求您从与您的页面相同的域加载 iframe 内容。

这将需要从IFRAME页面运行:

$('html').on('click', function () {
  parent.$('#frame').trigger('click');
});

其中#frame是您的 iframe 的 ID。 您可以将点击委托给父级中的任何内容(例如, 'body' ),这样也能正常工作。 取决于您希望将 iframe 中的内容与页面耦合的紧密程度。

所以,这应该照顾关闭菜单的页面。

重要更新

至于点击菜单项关闭菜单,显然在最新更新(2.0.4 > 2.1.0)中有一个错误[?]:选择选项时下拉菜单不会关闭。 选择器从'.dropdown form'更改为'.dropdown' ,所以现在曾经是一个着名的功能,可以更轻松地处理表单中的下拉列表,现在已经演变成一个回调,阻止对下拉菜单项的所有点击。

临时解决方案是包含以下代码,直到修复错误 (2.1.1):

$('body')
  .off('click.dropdown touchstart.dropdown.data-api', '.dropdown')
  .on('click.dropdown touchstart.dropdown.data-api'
    , '.dropdown form'
    , function (e) { e.stopPropagation() })
回答2

没有什么对我有用,除了这个:

$('.dropdown-menu li a').on('click', function(e) {
    $('.dropdown-toggle').dropdown('toggle');
    e.stopPropagation();
});
回答3

我在 2.1.1 中看到了同样的问题。

在 GitHub 上发布的对我来说很容易的解决方案是:

$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });

在 https://github.com/twitter/bootstrap/issues/5094 上归功于 blakeembrey

回答4

这是我根据 merv 的出色回答实施的完整解决方案。 如果我有更好的方法为将来的人发布解决方案,请告诉我。

这个jquery被添加到框架中页面的html底部:

$('html').on('click', function () {
  parent.$('#frame').trigger('click');
});

下拉菜单切换为按钮并重新设计以适应导航栏。 在 html 中:

                <li class="btn-group" id="samplebtn">
                    <a href="#" class="btn btn-primary dropdown-toggle" role="button" data-toggle="dropdown">
                        <i class="icon-pencil icon-white"></i>
                        Sample
                        <b class="caret"></b>
                    </a>

在 CSS 中:

        #samplebtn {
        position:absolute;
        top: 0;
        margin: 0px;
        padding: 0px;
        border: 0px;
        }
        #samplebtn .btn {
            border: 0px;
        }

解决方案的完整代码(更新问题中的完整代码 - 这仅是外部框架):

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
        <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
        <!-- Le styles -->
        <link href="./css/bootstrap.css" rel="stylesheet">
        <style>
            iframe {
                border: 0px;
                height: 95%;
                left: 0px;
                position: absolute;
                top: 50px;
                width: 100%;
            }
            #samplebtn {
            position:absolute;
            top: 0;
            margin: 0px;
            padding: 0px;
            border: 0px;
            }
            #samplebtn .btn {
                border: 0px;
            }
        </style>
    </head>
    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="brand" target="mainframe" href="./home.html">
                       Brand
                    </a>
                    <ul class="nav">

                        <li class="btn-group" id="samplebtn">
                            <a href="#" class="btn btn-primary dropdown-toggle" role="button" data-toggle="dropdown">
                                <i class="icon-pencil icon-white"></i>
                                Sample
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li>
                                    <a target="mainframe" href="./home.html#">One</a>
                                </li>
                                <li>
                                    <a target="mainframe" href="./home.html#">Two</a>
                                </li>
                                <li>
                                    <a target="mainframe" href="./home.html#">Three</a>
                                </li>
                                <li>
                                    <a target="_blank" href="#">Four
                                        <i class="icon-share-alt"></i>
                                    </a>
                                </li>
                                <li>
                                    <a target="_blank" href="#">Five
                                        <i class="icon-share-alt"></i>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">
                                <i class="icon-certificate icon-white"></i>Stuff</a></li>
                        <li>
                            <a href="#">
                                <i class="icon-globe icon-white"></i>Things</a></li>
                        <li>
                            <a target="mainframe" href="./home.html">
                                <i class="icon-film icon-white"></i>Nothing</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container">
            <iframe id="frame" name="mainframe" src="./home.html"></iframe>
            <!-- /container -->
        </div>
        <!-- Le javascript==================================================-->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

        <script src="./js/bootstrap.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.dropdown-toggle').dropdown();
                var frameheight = window.innerHeight - 50;
                document.getElementById("frame").style.height = frameheight + "px";
            });

            $(window).resize(function () {
                var frameheight = window.innerHeight - 50;
                document.getElementById("frame").style.height = frameheight + "px";
            });

            $('.dropdown-menu').on('click', function () {
              $('.dropdown-toggle').dropdown();
            });
        </script>
    </body>
</html>

为了完整参考,这是框架内页面的代码:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>Title</title>

        <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <!-- Le styles -->
        <link href="./bootstrap.min.css" rel="stylesheet">
        <style>

        </style>
    </head>

    <body onload="scrollTo(0,0); $('#loading').css('display','none');">
        <div id="loading" style="width: 100%; height: 100%; background-color: white; background-image:url('loader.gif'); background-repeat:no-repeat; background-position: center center; position:fixed; display: none; z-index:100;"></div>
        <script type="text/javascript">
            document.getElementById("loading").style.display = 'block';
        </script>


        <div class="container">
        <div class="span12">
                    <h2>Project Description</h2>
                    <p>Lorem Ipsum Dolor Sit Amet</p>


                </div>

            <!-- /container -->
        </div>
        <!-- Le javascript==================================================-->

        <script src="./jquery.js"></script>
        <script src="./bootstrap.min.js"></script>
<!--        <script src="./bootstrap-dropdown.js"></script>
-->
<script>
$('html').on('click', function () {
  parent.$('#frame').trigger('click');
});

</script>

    </body>

</html>

固定的测试站点,您可以预览(但不要复制整个页面代码,因为其中包含一些服务器端(cloudflare)内容)。 http://www.joshlevent.com/dropdownbug/

回答5

该错误现已修复,您可以使用 https://github.com/twitter/bootstrap/blob/2.1.1-wip/js/bootstrap-dropdown.js 2.1.1-wip 进行下拉

回答6

单击另一个时,您可以从下拉菜单中删除“打开”类。 到目前为止,这对我有用:

$(document).ready(function () {
    $('a.dropdown-toggle').each(function(){
        $(this).on("click", function () {
            $('li.dropdown').each(function () {
                $(this).removeClass('open');
            });
        });
    });
});
回答7

我修复了导航菜单中多个下拉菜单:其他解决方案对我不起作用

$('.dropdown-toggle').on('click', function (e) {
      $('.dropdown-toggle').each(function (i,elem) {
          if (elem != e.target) $(elem.parentElement).removeClass('open');
      });
})
回答8

您还可以使用此代码从父页面添加传播点击事件(为我解决了相同的问题):

var myFrameContents = document.getElementById("frame").contentWindow.document;
myFrameContents.body.addEventListener("click", function() {
    document.body.click();
});

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 如何隐藏Twitter Bootstrap下拉菜单(How to hide Twitter Bootstrap dropdown)
    问题 这很烦人-当我在Bootstrap下拉菜单中单击某个项目时,该下拉菜单不会关闭。 当您单击下拉项时,我将其设置为打开Facebox灯箱,但是它有问题。 我尝试过的 单击该项目后,我尝试执行以下操作: $('.dropdown.open').removeClass('open'); $('.dropdown-menu').hide(); 这将其隐藏起来,但是由于某种原因,它将无法再次打开。 如您所见,我确实需要关闭下拉菜单,因为它在保持打开状态时显得cr脚(主要是因为下拉菜单的z-index高于Facebox模态框叠加层。 为什么我不使用Bootstrap的内置模式框 如果您想知道为什么我不使用Bootstrap内置的漂亮模态框,那是因为: 它没有办法使用AJAX将内容加载到其中。 您每次必须为模式输入HTML; 使用Facebox,您可以执行以下操作: $.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'}); 它使用CSS3动画进行动画处理(看起来很不错),但是在非CSS3浏览器中它只是显示出来,看上去并不那么好。 Facebox使用JavaScript淡入,因此可在所有浏览器中使用。 回答1 试试这个: $('.dropdown.open .dropdown-toggle')
  • Twitter引导在下拉列表打开时停止传播(Twitter bootstrap stop propagation on dropdown open)
    问题 我在带有插件jOrgChart的div中有一个twitter引导下拉列表。 我遇到的问题是,当我单击按钮以打开下拉菜单时,它还会触发父div中的click事件,该事件会折叠其他元素。 这是我的html: <div id="chart"> <div class="node"> <div class="btn-group"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Actions <span class="caret"></span> </a> <ul class="dropdown-menu" style="text-align:left;"> <li><a href="#">Edit</a></li> <li><a href="#">Delete</a></li> </ul> </div> </div> <div class="node"> ... </div> 我想防止a.dropdown-toggle的点击冒泡到div.node,我尝试这样做: $("div#chart div.btn-group > a.dropdown-toggle").click(function (e) { e.stopPropagation(); }); 但是现在下拉菜单不起作用。 编辑 这是具体的情况
  • Twitter Bootstrap:在下拉列表关闭时调用js函数(Twitter Bootstrap: Call a js function when a dropdown is closed)
    问题 关闭或切换自举程序下拉菜单时是否会触发一个我可以配合的事件? 回答1 从twitter bootstrap官方页面: $('#myDropdown').on('hide.bs.dropdown', function () { // do something… }); hide.bs.dropdown是此处描述的4个事件之一。 更新(16年4月13日) 这些事件在Bootstrap 4也相同。 Bootstrap v4文档。 回答2 这就是Bootstrap v2.3.2如何关闭菜单的方法,无论您单击什么都可以: $('html').on('click.dropdown.data-api', function () { $el.parent().removeClass('open') }); 如果您使用的是v2.x,则可以用来了解何时关闭菜单。 但是,请记住,这是在每次点击时触发的。 如果仅在菜单真正关闭时(可能一直在执行)仅需要执行某项操作,则需要跟踪首先打开菜单的时间。 在这方面,公认的答案可能是更好的解决方案。 但是,在Boostrap v3.0.0中,下拉菜单支持四个单独的事件: show.bs.dropdown :调用show实例方法时,将立即触发此事件。 shown.bs.dropdown当下拉列表对用户可见时将触发此事件(将等待CSS转换完成)​​。 hide
  • Twitter Bootstrap下拉突然不起作用(twitter bootstrap drop down suddenly not working)
    问题 我想知道是否有人可以帮助我。 我的引导程序下拉菜单突然停止工作。 我不知道为什么。 它曾经在工作。 我没有触摸我的视图,也不是布局视图,所以我认为问题不存在。 我很确定这和我的javascript有关,但是我不知道它从哪里来。 我的宝石文件是... gem 'rails', '3.2.3' gem 'bootstrap-sass', '2.0.1' gem 'bcrypt-ruby', '3.0.1' gem 'faker', '1.0.1' gem 'will_paginate', '3.0.3' gem 'bootstrap-will_paginate', '0.0.5' gem 'devise' gem 'carrierwave' gem 'rmagick' gem 'delayed_job_active_record' gem 'daemons' gem 'make_voteable' gem 'admin_data' gem 'indextank' 而我的application.js是... //= require jquery //= require jquery-ui //= require jquery_ujs //= require bootstrap-dropdown //= require bootstrap //= require_tree
  • Twitter Bootstrap无法停止单击关闭的下拉列表(Twitter Bootstrap cant stop a dropdown from closing on click)
    问题 我查看了其他类似的问题,并尝试了许多解决方案,但没有一个起作用。 这是问题,这是顶部横幅的迷你登录表单。 当您在字段中单击时,我需要按钮不自动关闭。 这是我的代码: <script> $(document).on('click', '.dropdown-menu', function(e){ $(this).hasClass('keep_open') && e.stopPropagation(); // This replace if conditional. }); ​</script> <div class="btn-group" > <a class="btn btn-small btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"> <i class="cus-key"></i> Login <span class="caret"></span> </a> <ul class="dropdown-menu pull-right keep_open"> <form action="clog.php" method="post" class="keep_open"> <!-- dropdown menu links --> <li><input type="text" placeholder=
  • 避免双击以切换Bootstrap下拉菜单(Avoid having to double-click to toggle Bootstrap dropdown)
    问题 我正在使用Bootstrap下拉菜单。 问题在于它从不会在第一次单击时下降。 我需要单击2次才能切换。 我猜想click事件在传播之前就被卡在了某处... 有什么办法可以解决这个问题? 回答1 如果有人使用ui-bootstrap模块的angular以及常规的bootstrap HTML下拉列表定义,则还需要单击两次。 <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> [...] </li> =>删除data-toggle="dropdown"将解决此问题。 一键打开下拉菜单将在此之后起作用。 参考:https://github.com/angular-ui/bootstrap/issues/2294 回答2 在Bootstrap 4中, bootstrap.min.js和bootstrap.bundle.min.js现在在下拉菜单中发生冲突。 通过删除bootstrap.min.js ,下拉双击问题将得到解决。 回答3 如果您的项目中两次包含Bootstrap,则可能会发生这种情况。 如果bootstrap.min.js和bootstrap.bundle.min.js(bootstrap和popper js)都包含在项目中
  • Twitter Bootstrap提前输入多个值?(Twitter bootstrap typeahead multiple values?)
    问题 我正在将Twitter Bootstrap与Jquery一起使用。 我想对文本区域使用TYPEAHEAD函数,我可以非常轻松地工作。 但是我也需要它来允许多重选择。 我的意思是,在我从自动完成功能中选择一个单词之后,它将带我回到文本区域,并在其后留有额外的空格,然后如果我再次开始输入,它将为我提供再次执行的功能。 这是一个JS bin:http://jsbin.com/ewubuk/1/edit(里面没有什么特别的)。 是否有一个简单的解决方案允许使用预输入进行多项选择? 如果是,怎么办? 提前致谢。 回答1 编辑已经有一个关于此的拉力:https://github.com/twitter/bootstrap/pull/2007 您可以通过为预输入使用代理来实现所需的行为:演示(jsfiddle) var $myTextarea = $('#myTextarea'); $('.typeahead').typeahead({ source: source, updater: function(item) { $myTextarea.append(item, ' '); return ''; } }); 我认为updater方法用于这种事情,您只需返回将显示的内容即可。 或者,如果您真的希望所有内容都在同一个input元素中,则必须重写更多方法,使其仅与当前输入的元素匹配
  • 带悬停的Bootstrap下拉菜单(Bootstrap Dropdown with Hover)
    问题 好的,所以我需要的很简单。 我已经设置了一个带有一些下拉菜单的导航栏(使用class="dropdown-toggle" data-toggle="dropdown" ),并且工作正常。 事情是它可以在“ onClick ”上运行,而我希望它可以在“ onHover ”上运行。 有内置的方法可以做到这一点吗? 回答1 最简单的解决方案是使用CSS。 添加类似... .dropdown:hover .dropdown-menu { display: block; margin-top: 0; // remove the gap so it doesn't close } 工作小提琴 回答2 最好的方法是只用悬停触发Bootstraps click事件。 这样,它仍应保持对触摸设备的友好 $('.dropdown').hover(function(){ $('.dropdown-toggle', this).trigger('click'); }); 回答3 您可以使用jQuery的悬停功能。 您只需要在鼠标进入时添加open的类,并在鼠标离开下拉菜单时删除该类。 这是我的代码: $(function(){ $('.dropdown').hover(function() { $(this).addClass('open'); }, function() { $(this)
  • 避免在内部单击时关闭下拉菜单(Avoid dropdown menu close on click inside)
    问题 我有一个Twitter Bootstrap下拉菜单。 如所有Twitter Bootstrap用户所知,单击(即使在内部单击)时,下拉菜单也会关闭。 为避免这种情况,我可以轻松地在下拉菜单上附加一个click事件处理程序,只需添加著名的event.stopPropagation() 。 <ul class="nav navbar-nav"> <li class="dropdown mega-dropdown"> <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-list-alt"></i> Menu item 1 <span class="fa fa-chevron-down pull-right"></span> </a> <ul class="dropdown-menu mega-dropdown-menu"> <li> <div id="carousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-slide-to="0" data-target="#carousel"></li> <li class="active"
  • 如何在悬停而不是单击时使Twitter Bootstrap菜单下拉菜单(How to make Twitter Bootstrap menu dropdown on hover rather than click)
    问题 我想让我的Bootstrap菜单在悬停时自动下拉,而不是必须单击菜单标题。 我也想丢掉菜单标题旁边的小箭头。 回答1 我基于最新的(v2.0.2)Bootstrap框架创建了一个纯悬停下拉菜单,该框架具有对多个子菜单的支持,并认为我会将其发布给以后的用户: body { padding-top: 60px; padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } .dropdown-menu .sub-menu { left: 100%; position: absolute; top: 0; visibility: hidden; margin-top: -1px; } .dropdown-menu li:hover .sub-menu { visibility: visible; } .dropdown:hover .dropdown-menu { display: block; } .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu { margin-top: 0; } .navbar .sub-menu:before { border-bottom: 7px solid transparent; border
  • Twitter Bootstrap多级下拉菜单(Twitter Bootstrap Multilevel Dropdown Menu)
    问题 通过使用twitter bootstrap 2的元素,可以有一个多级下拉菜单吗? 原始版本没有此功能。 回答1 更新的答案 *更新了支持v2.1.1 **引导程序版本样式表的答案。 **但是请小心,因为此解决方案已从v3中删除 只是想指出一点,因为最新的引导程序现在默认支持多级下拉菜单,因此不再需要此解决方案。 如果您使用的是旧版本,则仍然可以使用它,但对于那些已更新到最新版本(在撰写本文时为v2.1.1)的人,则不再需要它。 这是从文档中直接获取更新的默认多层下拉列表的小提琴: http://jsfiddle.net/2Smgv/2858/ 原始答案 在github上的子菜单支持上已经出现了一些问题,它们通常由引导程序开发人员关闭,例如这一步,因此我认为使用引导程序的开发人员可以自行解决。 这是我放在一起的一个演示,向您展示了如何共同使用一个工作子菜单。 相关代码 的CSS .dropdown-menu .sub-menu { left: 100%; position: absolute; top: 0; visibility: hidden; margin-top: -1px; } .dropdown-menu li:hover .sub-menu { visibility: visible; display: block; } .navbar .sub-menu
  • 如何完全从Twitter Bootstrap 3关闭响应功能? [复制](How to turn off the responsive feature completely from Twitter Bootstrap 3? [duplicate])
    问题 这个问题已经在这里有了答案: 如何在Twitter Bootstrap 3中删除响应功能? (8个答案) 7年前关闭。 如何在Bootstrap 3中关闭响应能力? 我只想开发一个桌面版本,并且当大小不同时,它仍然应该看起来像桌面版本。 Twitter.com做到这一点。 如果您尝试调整大小,则在我的网站重新设计所有元素时,UI不会发生任何变化。 我想要的示例: 无论如何现在如何关闭响应? 所有帮助表示赞赏。 最近还读到,在Bootstrap 2.0中,您只删除了响应式boostrap CSS,但在3.0中,它被烘焙到一个CSS文件中。 谢谢。 回答1 编辑:我的下面的代码是为v3.0.0RC2编写的,但是在v3.0.0中,文档专门针对此问题提供了一个部分:http://getbootstrap.com/getting-started/#disable-response 使用col-xs-X类,因为它们是恒定的百分比宽度。 然后,响应性来自.container在不同的介质尺寸下使用max-width 。 您可以定义自己的.container替代方案,并使用其他所有常规方法: 小提琴为下面的示例:http://jsfiddle.net/xTePL/ HTML: <!-- Don't use .container at all or you will have to
  • 带有AngularJS的Twitter Bootstrap Navbar-折叠不起作用(Twitter Bootstrap Navbar with AngularJS - Collapse Not Functioning)
    问题 我正在使用Angular和Twitter Bootstrap导航栏,并尝试使折叠功能正常工作。 部分:program.html <div class="navbar navbar-inverse navbar-static-top" ng-include="'partials/navbar.html'" ng-controller="NavbarCtrl"></div> 部分:navbar.html <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> <a class="brand" href="#">Short Course</a> <div class="nav-collapse collapse"> <ul class="nav"> <li><a href="#"><i class="icon-home icon-white"></i> Home</a></li> <li
  • twitter bootstrap自动完成下拉列表/带有Knockoutjs的组合框(twitter bootstrap autocomplete dropdown / combobox with Knockoutjs)
    问题 我有一个必须使用引导程序自动完成下拉菜单的要求,但是用户可以根据需要在该下拉菜单中使用自由格式的文本。 在考虑TypeAhead之前,我可以使用Bootstrap TypeAhead文本框,但是我需要具有下拉菜单,因为我们希望提供一些默认值作为headstart选项,以防用户不知道要搜索什么。 我在MVC DropDownListFor中使用它,因为它为我们创建了一个选择控件。 我发现这篇文章为我做到了。 https://github.com/danielfarrell/bootstrap-combobox/pull/20 我要做的就是从选择控件中删除名称,而该控件让我输入自由格式的文本。 到目前为止一切都很好。 现在,我将其与Knockoutjs结合使用。 我将选项和选择的值绑定到选择控件,然后在模板呈现的行上调用(selector).combobox(),这使选择控件成为自举式组合框,并添加了输入控件并将选择控件隐藏在场景中在后面。 现在的问题是,当我尝试获取要发送到服务器的值时,由于输入框中输入的值不是我为选择控件提供的选项中的有效选项,因此默认情况下始终将其设置为第一个选项。 这是因为,我将所选值的绑定设置在选择控件上,而不是在bootstrap-combobox.js创建的输入框上。 我的问题是如何使输入框与选择控件绑定到的数据绑定到相同的属性。 还有其他选择吗?
  • 关闭Twitter Bootstrap Navbar Transition动画(Turning off Twitter Bootstrap Navbar Transition animation)
    问题 就像http://twitter.github.com/bootstrap一样, 我现在正在处理的网站是响应式的。 我想删除过渡动画 当我单击折叠的导航栏菜单按钮时。 上面的图片是我要问的屏幕截图。 在TOP-RIGHT-CORNER处,有一个三行菜单按钮。 回答1 Bootstrap使用CSS3过渡来完成响应式导航栏的过渡动画,就像完成折叠一样。 要仅关闭导航栏的转换(保留所有其他转换),只需覆盖CSS。 我建议您在可折叠容器中添加一个类,例如no-transition (但名称可以是任意的) <div class="nav-collapse no-transition"> 然后定义一个CSS规则,该规则将禁用Bootstrap定义的CSS3过渡(确保在bootstrap.css之后解析了您的CSS规则): .no-transition { -webkit-transition: height 0; -moz-transition: height 0; -ms-transition: height 0; -o-transition: height 0; transition: height 0; } 但是,不要到此为止! Bootstrap的JavaScript进行了硬编码,以假定如果浏览器支持转换,则将发生转换。 如果只是在上面进行更改,则会发现可折叠对象在一个打¼
  • Twitter Bootstrap 手风琴和按钮下拉溢出问题(Twitter Bootstrap Accordion and button dropdown overflow issue)
    问题 我正在将 Bootstrap 用于我网站的一部分。 我将手风琴与下拉按钮混合在一起。 当按钮位于底部时,问题就出现了,因为 .accordion-body 溢出设置为隐藏,下拉菜单被隐藏。 您可以在此处查看 jsfiddle:http://jsfiddle.net/DBQU7/6/ 所以我做了你所期望的,试图做overflow-y:visible 。 但是随后您可以在此处看到结果,它不起作用:(您可能还会注意到下拉列表在 div 内,它在 div 内创建了一个滚动条,而不仅仅是显示。 http://jsfiddle.net/DBQU7/5/ 我看到了这个类似的问题:Twiiter Bootstrap (Button Dropdown) + Div Fixed 但它并没有解决我上面提到的问题。 所以问题是,我怎样才能让下拉菜单正常显示。 谢谢。 到目前为止我发现的唯一解决方案(我很高兴被证明是错误的)是添加一个 CSS 属性,使溢出在打开时可见,然后通过 JS 脚本使其在可见和隐藏之间切换......不理想,但到目前为止没有更好的。 -- 编辑 -- 它实际上效果不佳,似乎不是一个可行的解决方案。 回答1 创见 你非常接近你的解决方案。 就是这个: .accordion-body.in { overflow:visible; } .in类在打开时添加,因此仅在打开时设置可见性。
  • Twitter Bootstrap:如何实现始终折叠的导航栏下拉菜单?(Twitter Bootstrap: How to achieve an always-collapsed navbar dropdown menu?)
    问题 我正在Twitter Bootstrap中使用Navbar组件 http://getbootstrap.com/components/#navbar 我的目的是使导航栏始终折叠(即使在桌面大小的设备上查看时也是如此)。 如何才能做到这一点? 到目前为止,我已经用我的代码创建了这个JSFIDDLE-您将看到它是非常标准的。 当结果窗口的大小小时,下拉菜单将折叠。 但是,如果您放大结果窗口,则下拉列表不会折叠。 我已经准确地粘贴了JSFiddle中的内容以供参考: <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="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span
  • Twitter Bootstrap移动导航:单击菜单链接后隐藏菜单(Twitter Bootstrap mobile nav: hide menu after clicking menu link)
    问题 我正在寻找一种使Twitter Bootstrap移动/平板电脑导航在单击菜单链接后自动隐藏/折叠的方法。 我有很多菜单项,因此当用户在iPhone中展开菜单时,他们只能看到菜单,而看不到下面的页面。 当用户单击菜单链接时,这会使用户感到困惑,从而使单击后似乎什么也没有发生。 非常感谢您,并拥抱任何可以通过此向我指出正确方向的人! 回答1 如果您使用的是BS3.x,则可以使用这样的标记折叠移动导航-注意主页链接的标记中的“数据切换”和“数据目标”: <nav class="collapse navbar-collapse" role="navigation"> <ul class="nav navbar-nav"> <li class="active"> <a data-toggle="collapse" data-target=".navbar-collapse" href="#home">Home</a> </li> <li> 您也可以通过以下脚本折叠移动导航: <script> $('.navbar-collapse a').click(function (e) { $('.navbar-collapse').collapse('toggle'); }); </script> 这种方法绝对不需要额外的标记。 每次在导航中单击链接时,都会切换导航栏。 干杯。 回答2
  • 在元素下弹出twitter bootstrap下拉菜单(twitter bootstrap dropdown popping under elements)
    问题 您可以在此屏幕截图中看到,每行包含“ hi”的菜单都在主体元素下方以及屏幕上的按钮下方弹出。 dom结构如下所示: 打开时dropdown元素的计算样式为: background-color: transparent; color: #999; display: block; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; height: 20px; line-height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; overflow-x: visible; overflow-y: visible; position: relative; width: 1425px; 这是在下拉菜单的计算样式“上方”弹出的项目之一: box-sizing: border-box; color: white; cursor: pointer; display: inline-block; height: 22px; line-height: 17px; list-style-image: none; list-style-position: outside; list
  • Twitter Bootstrap下拉菜单的Z索引问题(z-index issue with twitter bootstrap dropdown menu)
    问题 我在页面顶部的固定导航栏中使用了twitter bootstrap下拉菜单。 一切正常,但下拉菜单项显示在其他页面元素后面而不是前面,则存在问题。 如果页面上有任何position: relative (例如jquery ui手风琴或google图表),则下拉菜单将显示在其后面。 尝试更改dd菜单和导航栏的z-index ,但没有任何区别。 我可以使菜单位于其他内容之上的唯一方法是将内容更改为position: fixed; 或z-index: -1; -但是这两种解决方案都会引起其他问题。 感谢您能给我的任何帮助。 我认为这可能是我误解了CSS定位的一些标准问题,因此没有发布任何代码,但是可以在需要时执行。 谢谢。 回答1 刚意识到发生了什么事。 我的导航栏位于标头中, position: fixed ; 更改了标头上的z-index ,它现在可以正常工作-猜想我在容器上方看起来不够高,无法初始设置z-index !#@ !? 谢谢。 回答2 Windows 8上的IE 7(具有自举程序3.0.0)。 .navbar { position: static; } .navbar .nav > li { z-index: 1001; } 固定的 回答3 在这里遇到相同的错误。 这对我有用。 .navbar { position: static; } 通过将位置设置为静态