모든 navbar를 표시하는 bootstrap3 토글 버튼 (스크롤 다운 버튼 없음)

debugcn 에 게시 Dev

고리

토글 할 때 접을 수있는 navbar가 많이 있습니다. 이제 축소 된 탐색 모음의 일부만 표시 할 수 있습니다. 더 많은 navbar를 보려면 아래로 스크롤해야합니다. 모든 navbar를 표시하는 방법이 있습니까?

난 엉망이 됐어

.collapse{
    height: 900px;
}

그러나 900px에 도달하면 더 이상 표시 할 수없는 navbar의 수만 감소합니다.

여기에 이미지 설명 입력

<style>
.collapse{
    height: 900px;
}
</style>

<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <p class="navbar-brand">User</p>
        </div>  

        <div class="collapse  navbar-collapse" id = "myNavbar">
            <ul class="nav navbar-nav">
                <li ><a href="#"><span class="glyphicon glyphicon-pencil"></span> something</a></li>
                <li ><a href="#"><span class="glyphicon glyphicon-heart"></span> something</a></li>
                <li ><a href="#"><span class="glyphicon glyphicon-edit"></span> something</a></li>
                <li ><a href="#"><span class="glyphicon glyphicon-upload"></span> something</a></li>
                <li ><a href="#"><span class="glyphicon glyphicon-music"></span> something</a></li>
                <li ><a href="#"><span class="glyphicon glyphicon-pawn"></span> something</a></li>
                <li ><a href="#"><span class="glyphicon glyphicon-plus"></span> something</a></li>
                <li class = "dropdown">
                    <a class = "dropdown-toggle" data-toggle = "dropdown" href="#"><span class="glyphicon glyphicon-th-list"></span> something<span class="caret"></span></a>
                    <ul class = "dropdown-menu">
                        <li ><a href="#"><span class="glyphicon glyphicon-pawn"></span> something</a></li>
                        <li ><a href="#"><span class="glyphicon glyphicon-pawn"></span> something</a></li>
                        <li ><a href="#"><span class="glyphicon glyphicon-pawn"></span> something</a></li>
                        <li ><a href="#"><span class="glyphicon glyphicon-pawn"></span> something</a></li>
                        <li ><a href="#"><span class="glyphicon glyphicon-pawn"></span> something</a></li>
                        <li ><a href="#"><span class="glyphicon glyphicon-search"></span> something</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href = "#"><span class = "glyphicon glyphicon-log-out"></span> something</a></li>
            </ul>
        </div> 
    </div>  
</div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>

감사

R 램

의 경우 스타일을 .navbar-collapse무시합니다 max-height.

이것을 CSS로 설정하십시오.

.navbar-collapse {max-height:none}

데모 링크

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-3

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

모든 navbar를 표시하는 bootstrap3 토글 버튼 (스크롤 다운 버튼 없음)

모든 navbar를 표시하는 bootstrap3 토글 버튼 (스크롤 다운 버튼 없음)

다른 아이콘이있는 Twitter Bootstrap 3 navbar 토글 버튼

스크롤 할 때 다른 모든 토글 버튼이 활성화되는 이유는 무엇입니까?

Navbar 토글 버튼 및 드롭 다운 메뉴가 작동하지 않음

Bootstrap navbar 토글 버튼이 제대로 작동하지 않음 (HTML 내부)

더 작은 해상도로 크기를 조정할 때 토글 버튼을 표시하도록 부트 스트랩 탐색 모음을 가져올 수 없습니다.

JavaScript 토글 버튼이 버튼 상태를 변경하지 않음

iOS의 UIAlertView에서 일반 글꼴로 모든 버튼 텍스트를 표시하는 방법

Navbar 토글 버튼이 열리고 즉시 닫힙니다.

간단한 Java 앱 (버튼 3 개-모든 버튼이 카운트를 시작하고 중지 함)

모든 버튼의 크기를 동일하게 만듭니다.

마우스 오버시 3 줄 토글 버튼을 강조 표시하는 방법은 무엇입니까?

링크 (버튼 아님)를 토글하여 텍스트를 표시하고 숨기는 방법

부트 스트랩 버튼 토글이 LI를 열지 않음

탭을 토글하고 드롭 다운을 여는 버튼 하나 인 Bootstrap 3 메뉴?

온라인 버튼 (애니메이션)을 생성하고 모든 크기를 다운로드하는 도구

하나의 자바 스크립트 토글 버튼을 다른 버튼으로 끄기

토글 버튼이있는 ListView가 부드럽게 스크롤되지 않습니다.

Bootstrap에서 navbar 토글 버튼과 로고를 왼쪽으로 이동하는 방법은 무엇입니까?

다중 버튼 시스템이없는 다중 버튼?

부트 스트랩 4 NavBar 토글 버튼이 버튼 그룹 안에 있으면 작동하지 않습니다.

Gluon 모바일 스크롤 가능 드롭 다운 버튼

Gluon 모바일 스크롤 가능 드롭 다운 버튼

자바 스크립트 토글 버튼이 작동하지 않음

왼쪽 부트 스트랩 드롭 다운 토글 버튼?

버튼을 계속 클릭하여 자바 스크립트에서 다음 요소를 표시하는 방법

firebase 참조를 사용하는 표시 버튼. 버튼은 확인없이 분명히 표시됩니다

Vuetify는 모든 버튼을 둥글게 만듭니다.

토글 버튼이 닫히지 않음-MVC 5 / Bootstrap 3

JFrame에 모든 버튼을 표시 할 수 없음