부트 스트랩 드롭 다운 메뉴가 작동하지 않음


100

드롭 다운을 작동시키는 데 문제가 있습니다. navbar를 완벽하게 표시 할 수 있지만 "Dropdown"(둘 중 하나)을 클릭하면 드롭 다운 메뉴가 표시되지 않습니다. 나는 이것에 대해 다른 게시물을 찾아 보았지만 모든 사람의 문제를 해결하는 것은 도움이되지 않았습니다. 부트 스트랩 웹 사이트에서 직접 소스를 복사했지만 내 컴퓨터에서 작동하지 않는 것 같습니다. 누구나 아이디어가 있습니까? 나는 한 시간 동안 그것을 쳐다 보았고 문제가 무엇인지 알아낼 수없는 것 같습니다.

<head>
<script src="resource/js/jquery-1.11.0.js"></script>
<script src="resources/js/bootstrap.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('dropdown-toggle').dropdown()
});
</script>
</head>
<body>
<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>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
  <form class="navbar-form navbar-left" >
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->


1
죄송합니다. 제가이 글을 썼을 때 직장에서. 설명을 편집했습니다.
user2540528

링크를 알려주시겠습니까? @ user2540528
STP38

JS 파일에 대한 링크?
user2540528

1
방금 코드를 복사하고 js / css를 추가
Chris

'부트 스트랩 웹 사이트에서 직접 소스를 복사했습니다'@ user2540528, 링크를 줄 수 있습니까?
STP38

답변:


142

어쩌면 시도

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

작동하는지 확인하십시오.


해냈어. 로컬 파일이 작동하지 않는 이유는 무엇입니까? 그리고 이것을 도메인에 배포하면 이러한 js 소스가 정확합니까? 앱을 완료하고 게시 한 후에도 앱이 계속 작동하는지 확인하고 싶습니다. (그것은 이잖아 그래서 내가 물어 왜, 내 첫 번째 하나)
user2540528

@ user2540528 아마도 파일 이름이 다르게 지정 jquery-1.11.0.js되었거나 전혀 없습니다.
크리스

user2540528 당신은 미스 bootstrap.css 듯
AVEC

1
내 문제는 내가 올바른 장소에서 bootstrap.css을 가지고 있지만 bootstrap.min.js 내 번들에 포함하지 않았다이었다
codingNightmares

그 코드 라인의 순서도 중요하다는 것을 깨달았습니다. Google api를 코드의 마지막 줄로 넣으면 작동하지 않습니다.
Efe Büyük

114

부트 스트랩 + 레일 프로젝트가 있었고 드롭 다운이 제대로 작동했습니다. 그들은 업데이트 후 작동을 멈췄습니다 ...

이것이 문제를 해결 한 솔루션입니다. .js 파일에 다음을 추가하십시오.

$(document).ready(function() {
    $(".dropdown-toggle").dropdown();
});

드롭 다운이 처음에만 작동하지만 두 번째 클릭에서는 작동하지 않는 Bootstrap 3 및 Rails 4.2의 문제를 해결했습니다.
bovender

Spud CMS가있는 Grails 프로젝트-이것은 내 드롭 다운 토글 문제를 해결했습니다.
Tyler Rafferty 2016 년

감사합니다 1. 모두가 "부트 스트랩 앞에 jquery를 추가하십시오"라고 말하고 있습니다. 하지만 그랬습니다. 이것은 그들이 일한 시간이 지난 후에 단지 대답하는 것입니다!
MaNTiS

1
이것은 나를 크게 도왔습니다. 이 수정이 필요한 이유를 아십니까?
Brack

1
이 솔루션은 저에게 효과적이었습니다. 내 사이트에서 부트 스트랩을 두 번 가져 왔고 한 번만 가져온 후이 솔루션의 수정없이 작동하기 시작했습니다.
harshpatel991

27

100 % 작업 솔루션

모든 js 및 css 링크보다 먼저 Jquery 링크를 배치하십시오.

올바른 예

<script src="jquery/jquery.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />

예가 잘못되었습니다!

<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="jquery/jquery.js"></script>

제 경우에는 작동하지 않았습니다. Iwan B.의 솔루션을 사용해야했습니다.
toddmo

1
@Nabin 부트 스트랩이 jquery를 사용하기 때문에 먼저 jquery를로드 한 다음 부트 스트랩을로드해야하기 때문에 작동합니다
Siddaram H

@toddmo 작동합니다. jquery, bootstrap 및 css가 올바르게로드되었는지 확인하거나 Google crome dbugger의 networy 탭에서 확인하지 않습니다
LMK

12

다음과 같이 부트 스트랩 js 링크 앞에 jquery js 링크를 넣으십시오.

<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>

대신에:

<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>

Put the jquery css ...>Put the jquery js ...
allcaps

2
당신의 말은 정확하지만 코드 블록은 당신이 말하는 것과 반대입니다.
Astra Bear

4

getBootstrap.com에 따르면 드롭 다운은 타사 라이브러리 Popper.js를 기반으로합니다. 따라서 드롭 다운 메뉴가 클릭시 작동하지 않지만 드롭 다운의 마우스 오버에서만 작동하는 경우 popper.js, bootstrap.js 및 bootstrap.css가 포함됩니다. 부트 스트랩 번들을 포함하기 전에 popper.js를 포함하지 않는 것이 이유 중 하나 일 수 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"></link>

https://getbootstrap.com/docs/4.0/components/dropdowns/


1
버전 4의 경우 이것은 프로젝트에 Jquery와 부트 스트랩 만 포함하는 데 익숙 할 때 큰 변화 인 대답입니다.
Vindic

1
예, 순서가 정말 중요합니다.
nikhilmeth 2019-04-24

이것은 나를 위해 일한 것입니다. Bootstrap 페이지에서 동일한 코드를 복사했지만 올바른 순서입니다.
DuckRodgers

3

ASP .NET Forms를 사용하는 동안이 문제에 직면했습니다. 내가 사용한 솔루션 <asp:ScriptManager runat="server">은 마스터 페이지 에서 jQuery 및 Bootstrap 참조를 삭제하거나 주석 처리하는 것이 었습니다 . .NET Framework에 넣은 jQuery 및 Bootstrap 참조와 충돌을 일으키는 것 같습니다 <header>.


2

여전히 같은 문제가 발생하는 경우 브라우저에서 보기 페이지 소스 를 확인하여 모든 jquery 및 부트 스트랩 파일이로드되고 파일 경로가 올바른지 확인하십시오. 가장 중요한! 안정적인 최신 jquery 파일을 사용해야합니다.


2

아마도 누군가가 다음과 같은 혜택을 누릴 수 있습니다.

요약 (일명 tl; dr)

부트 스트랩 드롭 다운이 django-bootstrap3버전 6.2.2에서 11.0.0.

배경

우리는 기존에 유사한 문제가 발생 django에 크게 의존 사이트 bootstrap를 통해 django-bootstrap3. 이 사이트는 항상 잘 작동했으며 프로덕션에서는 계속 작동했지만 로컬 테스트 시스템에서는 그렇지 않았습니다. 코드에 명백한 관련 변경 사항이 없었으므로 종속성 문제가 가장 가능성이 높습니다.

조짐

로컬 django 테스트 서버 에서 사이트를 방문했을 때 첫눈에 완벽하게 괜찮아 보였습니다 bootstrap. navbar를 포함하여 예상대로 스타일 / 레이아웃을 사용 했습니다. 그러나 모든 드롭 다운 메뉴가 드롭 다운되지 않았습니다.

브라우저 콘솔에 오류가 없습니다. 모든 정적 jscss파일이 성공적으로로드되었으며 다른 패키지의 기능 jquery이 예상대로 작동했습니다.

해결책

django-bootstrap3로컬 Python 환경 의 패키지가 최신 버전으로 업그레이드 된 11.0.0반면 사이트는 6.2.2.

롤백 django-bootstrap3==6.2.2하여 문제 를 해결했지만 정확히 원인을 알 수는 없습니다.


1

레일 4.0을 사용하고 있는데 같은 문제가 발생했습니다.

테스트를 통과 한 내 솔루션은 다음과 같습니다.

Gemfile에 추가

gem 'bootstrap-sass'

운영

bundle install

그런 다음 app / assets / javascripts / application.js에 추가하십시오.

//= require bootstrap

그러면 드롭 다운이 작동합니다.

그건 그렇고, Chris의 솔루션도 저에게 효과적입니다.

하지만 자산 파이프 라인 아이디어에 덜 부합한다고 생각합니다.


0

Rails 4를 위해해야 ​​할 일이 더 많은 것 같습니다.

  1. 내부 Gemfile 추가.

    gem 'bootstrap-sass', '~> 3.2.0.2'

여기에서 볼 수 있듯이

  1. 다음으로 실행해야합니다.

    $ bundle 설치

이것은 아무도 언급하지 않은 부분입니다.

config / application.rb 파일을 엽니 다.

  1. 두 번째 끝에서 마지막 끝까지 바로 추가

    config.assets.precompile + = % w (*. png * .jpg * .jpeg * .gif)

여기에서 볼 수 있듯이 페이지 아래로 약 20 %.

  1. 다음으로이 디렉토리에 custom.css.scss 파일을 만듭니다.

    앱 / 자산 / 스타일 시트

위의 작업에서 조금 더 아래에서 볼 수 있듯이

  1. 그 파일 안에

    @import "부트 스트랩";


이제 서버를 중지하고 다시 시작하면 모든 것이 잘 작동합니다.

보석을 사용하지 않고 부트 스트랩을 실행하려고했지만 작동하지 않았습니다.

누군가를 도울 수 있기를 바랍니다!



0

제 경우에는 Chrome 확장 프로그램을 비활성화하면 문제가 해결되었습니다. 범인을 찾을 때까지 Chrome에서 하나씩 제거했습니다.

문제가되는 Chrome 확장 프로그램의 작성자이므로 확장 프로그램을 수정하는 것이 좋습니다.


0

내 부트 스트랩 버전은 bootstap4-alpha를 가리키고있었습니다.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>

4- 베타로 변경

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
        integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
        crossorigin="anonymous"></script>

그리고 그것은 작동하기 시작했습니다


0

문제는 href가 href = "#"라는 것입니다. 모든 태그에서 href = "#"를 제거해야합니다.


0

Bootstrap 4의 경우 추가 라이브러리가 필요합니다. 브라우저 콘솔을 읽으면 Bootstrap은 실제로 드롭 다운이 작동하는 데 필요하다는 오류 메시지를 인쇄합니다.

Error: Bootstrap dropdown require Popper.js (https://popper.js.org)

0

각도 프로젝트에서 angular-cli.json 또는 angular.json 논문 줄을 추가합니다.

      "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"

  ],

0

위의 모든 답변을 시도했으며 나를 위해 작동하는 유일한 버전은 jquery 1.11.1 입니다. 다른 모든 버전 1.3.2, 1.4.4, 1.8.2, 3.3.1로 시도했지만 navbar 드롭 다운이 작동하지 않습니다.

<script src="jquery/jquery-1.11.1.min.js"></script>

0

Ruby on Rails 에서 문제가 발생하면 Bootstrap Ruby Gem readme 파일 에서 전체 솔루션을 제공 합니다. .

또는 간단히 :

  1. 이름 바꾸기 application.cssapplication.scss
  2. 더하다 @import "bootstrap";
  3. 추가 gem 'jquery-rails'Gemfile 이 존재하지 않는.
  4. 추가 //= require jquery3 //= require popper //= require bootstrap //= require bootstrap-sprocketsapplication.js.
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.