Bootstrap 3 Navbar가 축소되는 것을 어떻게 방지할 수 있습니까?

Bootstrap 3에서 Navbar 축소 방지

Bootstrap의 navbar는 다양한 화면 크기에 맞게 축소 가능한 메뉴를 만드는 편리한 방법을 제공합니다. 그러나 특정 시나리오에서는 메뉴가 항상 표시되도록 축소 기능을 비활성화할 수 있습니다.

해결책

navbar가 축소되는 것을 방지하려면 특정 CSS를 재정의할 수 있음 속성:

.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}

설명

• 첫 번째 속성은 기본 .collapse 동작을 재정의하여 메뉴가 계속 표시되도록 합니다.
• 두 번째 및 세 번째 속성은 왼쪽 및 오른쪽 메뉴 항목이 모두 왼쪽에 떠서 같은 위치에 정렬되도록 합니다. line.
• 네 번째 속성은 작은 화면에서 오른쪽 메뉴 정렬과 관련된 사소한 문제를 수정합니다.

샘플 코드

고려하세요. 탐색 모음에 대한 다음 HTML 코드:

<div class="navbar navbar-fixed-top myfont" role="navigation">
    <div class="">
        <ul class="nav navbar-nav navbar-left">
            <li>
                <a class="navbar-brand" href="#">
                    <img src="assets/img/logo.png" />
                </a>
            </li>
            <li>
                <button class="btn btn-navbar">
                    <i class="fa fa-edit"></i>
                    Create 
                </button>
            </li>
        </ul>
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li data-match-route="/"><a href="#/page-one">Login</a></li>
        <li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li>
    </ul>
</div>

CSS를 적용하여 위에서 언급한 재정의를 적용하면 화면 크기에 관계없이 이 탐색 모음이 더 이상 축소되지 않습니다.

위 내용은 Bootstrap 3 Navbar가 축소되는 것을 어떻게 방지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!