0
첫 번째 질문은 양해 해 주셔서 감사합니다.부트 스트랩 모바일 메뉴가 열리지 않습니다
나는 비슷한 질문을하고 솔직하게 하나를 찾지 못해 놀랐다.
필자도이 점을 충분히 배웠습니다. 여기
https://jsfiddle.net/jhallwebdev/gm6r6mLu/5/
HTML
<body>
<div class="container-fluid">
<div class="row yellow container-fluid"> <!-- YELLOW NAV ROW -->
<div class="col-lg-1 col-md-2 col-sm-2 col-xs-2">
<div>
<img src="logo.jpeg" alt="logo" title="logo" width="100px" height="100px" class="my-image">
</div>
</div>
<div class="col-lg-5 col-md-7 col-sm-7 col-xs-7">
<div class="jer-margin-left">
<div class="header-title">My Bootstrap Site</div>
<div class="header-slogan">And its navbar problem...</div>
</div>
</div>
<div class="col-lg-6 col-md-3 col-sm-3 col-xs-3">
<div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav jer-nav">
<li class="jer-active"><a href="#">HOME <span class="sr-only">(current)</span></a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">FORMS</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
</div> <!-- END YELLOW NAV ROW -->
</div> <!-- END CONTAINER -->
CSS
[hidden] {
display: none;
}
* {
box-sizing: border-box;
}
.yellow {
background-color: rgb(253, 232, 104);
width: 100%;
}
.my-image {
margin: 10px;
}
.jer-margin-left {
margin-left: 15px;
}
.header-title {
color: #000;
font-family: Merriweather;
font-style: italic;
font-size: 30px;
margin: 20px 0 0 0;
}
.header-slogan {
color: #000;
font-family: Merriweather;
font-style: italic;
font-size: 22px;
}
.no-left-margin {
margin-left: -70px;
}
.navbar-default {
background-color: rgb(253, 232, 104);
border-color: rgb(253, 232, 104);
padding-top: 20px;
}
.jer-nav {
padding-top: 10px;
padding-bottom: 10px;
color: #000;
text-align: center;
font-family: Montserrat;
font-size: 16px;
text-transform: uppercase;
float: right;
}
.navbar-default .navbar-nav>li>a {
color: #000;
}
.navbar-default .navbar-nav>li>a:hover {
color: white;
}
.container-fluid {
padding-right: 0;
padding-left: 0;
margin: 0;
}
.jer-active {
border: silver solid 1px;
background-color: rgb(253, 232, 104);
}
@media (max-width: 420px) {
.jer-margin-left {
margin-left: 65px;
}
}
@media (max-width: 600px) {
.header-title {
font-size: 22px;
}
.header-slogan {
font-size: 15px;
}
.jer-margin-left {
margin-left: 45px;
}
}
@media (max-width: 1200px) {
.ph-float-right {
float: none;
margin-right: 0;
}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
를 볼 수있는 모바일 메뉴를 강제로 출력 윈도우의 크기를 줄일 수 있습니다. (가로 텍스트 메뉴 대신)
문제 1 : 모바일 메뉴를 열려면 두 번 클릭해야합니다. 이것이 첫 번째 문제입니다.
문제점 2 : 열어 두지 않습니다.
바이올린을 설치하면서 나는 모든 CSS가 제거 된 것과 같은 CSS 문제가 희망대로 작동한다고 믿게되었습니다. 내가 바이올린을 제대로 설정하면 내 CSS가 CSS 창에 있고 주식 부트 스트랩 CSS가 jsfiddle의 외부 리소스 옵션을 통해 들어옵니다.
고맙습니다.
여기 어디서나 붕괴 쇼 수업을 볼 수 없습니다. 그럴까요? 부트 스트랩 사이트에서 바로 navbar를 복사했습니다. 그런 다음 필요없는 부분을 제거했습니다. 나는 어떤 수업도 삭제하지 않았다. –
아니요, 해당 클래스는 부트 스트랩의 JavaScript에 의해 요소에 추가됩니다. (https://v4-alpha.getbootstrap.com/components/collapse/) –
제거하면 반대가됩니다. 메뉴는 기본적으로 열립니다. 그리고 그것을 닫으려면 클릭하면 다시 열립니다. –