부트 스트랩을 사용하여 사이트를 만들려고했는데 어쨌든 할 계획이었던 드롭 다운 메뉴를 만들 수있는 기능이 있다는 것을 알았습니다. 그래서 그것에 뛰어 들었습니다.부트 스트랩 드롭 다운 메뉴가 완고합니다.
전혀 작동하지 못했습니다. 나는 주위를 둘러 보았고 jQuery 링크가 Bootstrap, double 및 triple이되기 전에 다시 배열하여 코드가 w3schools의 예제와 동일한 기반을 가졌는지 확인했지만 버튼을 클릭하지 않아도 아무런 조치도 취하지 못했습니다. 나는 심지어 내 코드를 주석 처리하고 예제로 바꾼 지점까지 갔지만 작동하지도 않았다.
내 CSS 파일 (및 아래 복사본 포함)에서 모든 div 개체의 배경 및 테두리 속성을 none으로 또는 "1px 검정색"으로 설정된 테두리로 재정의했습니다. 시체와 그들이 착륙하는 곳. 또한 행 클래스의 위쪽과 아래쪽 여백을 오버 라이드했습니다. 항목을 서로 마주 보게하려고했기 때문입니다. 나는 css 파일의 해당 부분을 삭제하고 페이지를 다시로드하여 문제인지 확인했지만 문제는 변경되지 않았습니다.
내 전체 css 파일 (그리고 나중에 쓰는 빈 스크립트 파일)을 제거해도 문제가 해결되지 않습니다.
동일한 행의 모든 열을 동일한 높이로 만들 수있는 추가 부트 스트랩 링크를 제거하면 작동하지 않습니다.
메인 링크에서 무결성 및 교차 간판을 제거하지 않아도 작동합니다 (링크를 발견 했으므로 제작자의 추천으로 남겨 두었습니다).
동시에 3 개 모두 벗겨내는 기능이 작동하지 않습니다. 그리고 그것은 심지어 w3schools의 예와 함께 그것을 제거하고 있습니다. 나는 나쁜 링크를 의심하고, w3schools가 'minified css'로 제안한 CDN을 사용했습니다. 개선 없음.
그래서 저는 약간의 재치가 있고 꽤 깊이 내고 있습니다. 필자는 필요한 HTML 코드 (모든 것을 주석으로 처리했습니다. 어쨌든 테스트하려고 시도했습니다)를 작성하고 제목 표시 줄에 대한 CSS 코드를 포함하여 완성도를 높이기로했습니다 , 다시, 나는 어떤 점에서 html 문서에서 전체 파일을 찢어 버렸다. 따라서 문제가 CDN 링크 외부의 CSS와 관련되어 있다면 매우 놀랍습니다.
HTML 코드가 (내 드롭 다운 메뉴 코드 주석, 활성 코드가 w3school의 예에서입니다) :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>To-Do Weekly List</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />
<link href="format.css" rel="stylesheet" type="text/css" />
<script src="main.js"></script>
</head>
<body>
<!-- <div class="dropdown" id="option-div">
<button id="option-btn" class="btn btn-primary dropdown-toggle" type="button"></button>
<ul class="dropdown-menu">
<li id="pswd-change"><p>Change your password</p></li>
<li id="end-user"><p>Delete your account</p></li>
<li class="divider"></li>
<li id="help"><p>Help</p></li>
</ul>
</div> -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</body>
</html>
CSS 코드 :
/*all div's, negating some of bootstrap's formatting*/
div {
position: relative;
background: none !important;
border: 1px solid black !important;
}
/*bootstrap's row class*/
.row{
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/*the button is within this title bar*/
#title-bar{
background: #b3ffb3 !important;
border: 2px solid grey !important;
}
/*This is the direct css for the button that's commented out*/
button#option-btn{
background: url(https://cdn1.iconfinder.com/data/icons/seo-13/512/settings-128.png);
height: 3rem;
width: 3rem;
background-size: 100%;
position: absolute;
bottom: 1rem;
left: 2rem;
}
/*the div item that held my button (commented out) and had class="dropdown"*/
#option-div{
height: 6rem !important;
width: 6rem !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
}
/*just for the header in the title bar
#header{
font-size: 4rem;
padding: .50rem;
}
사람이 여기에 무슨 일이 일어나고 있는지 볼 수 있다면
, 나는 정말로 감사 할 것입니다. 나는 지금까지 이것을 너무 오랫동안보고 있었으면 좋겠다. 그리고 나는 정말로 작은 것을 놓치고있다.
정확히 무엇이 문제입니까? 예상되는 결과는 무엇이며 해당 코드를 실행할 때 현재 결과는 무엇입니까? –
부트 스트랩의 예제에는 http : // getbootstrap이 더 유용 할 수 있습니다.com/components/# dropdowns – Katie
코드가 작동하지만 부트 스트랩 JS를 어디서로드합니까? – makshh