[twitter-bootstrap] 부트 스트랩 3 Navbar 접기

Bootstrap 2와 Bootstrap 3의 큰 차이점은 Bootstrap 3이 “모바일 우선”입니다.

즉, 기본 스타일은 모바일 장치 용으로 설계되었으며 Navbar의 경우 기본적으로 “축소”되고 특정 최소 크기에 도달하면 “확장”됩니다.

부트 스트랩 3의 사이트에는 실제로 할 일에 대한 “힌트”가 있습니다.
http://getbootstrap.com/components/#navbar

접는 점 사용자 정의

탐색 표시 줄의 내용에 따라 탐색 표시 줄이 축소 모드와 가로 모드간에 전환되는 지점을 변경해야 할 수 있습니다. @ grid-float-breakpoint 변수를 사용자 정의하거나 고유 한 미디어 쿼리를 추가하십시오.

LESS를 다시 컴파일하려는 경우 variables.less파일 에 명시된 LESS 변수가 있습니다. 현재 @media (min-width: 768px)Bootstrap 3 용어로 “작은 화면”(예 : 태블릿) 인 “확장”으로 설정되어 있습니다.

@grid-float-breakpoint: @screen-tablet;

접힌 상태를 조금 더 길게 유지하려면 다음과 같이 조정할 수 있습니다.

@grid-float-breakpoint: @screen-desktop; (992px 중단 점)

또는 더 빨리 확장

@grid-float-breakpoint: @screen-phone (480px 중단 점)

나중에 확장하고 LESS 다시 컴파일을 처리하지 않으려면 768px미디어 쿼리에 적용되는 스타일을 덮어 써서 이전 값으로 되돌려 야합니다. 그런 다음 적절한 시간에 다시 추가하십시오.

더 좋은 방법이 있는지 확실하지 않습니다. Bootstrap LESS를 필요에 맞게 다시 컴파일하는 것이 가장 쉬운 방법입니다. 그렇지 않으면 Navbar에 영향을 미치는 모든 CSS 미디어 쿼리를 찾아 768px 너비의 기본 스타일로 덮어 쓴 다음 더 높은 최소 너비로 되돌려 야합니다.

LESS를 다시 컴파일하면 변수를 변경하여 모든 마법을 수행 할 수 있습니다. 이것은 LESS / SASS 프리 컴파일러의 요점입니다. =)

(참고로, 나는 모두 100 줄의 코드입니다. 아이디어를 포기하고 주어진 프로젝트에 대해 부트 스트랩을 다시 컴파일하고 우연히 무언가를 엉망으로 만드는 것을 피하기에 충분히 성가신 코드입니다.)

도움이 되길 바랍니다.

건배!

답변

 @grid-float-breakpoint

FILE: main.css.scss
-------------------

// control the screen sizes
$screen-xs-min: 300px;
$screen-sm-min: 400px;
$screen-md-min: 800px;
$screen-lg-min: 1200px;

// this tells which screen size to use to start breaking on
// will tell navbar when to collapse
$grid-float-breakpoint: $screen-md-min;

// then import your bootstrap
@import "bootstrap";

@media (max-width: 991px) {
    .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-collapse.collapse.in {
        display: block!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;
    }
}

@screen-xs:                  480px;
@screen-phone:               @screen-xs;

// Small screen / tablet
@screen-sm:                  768px;
@screen-tablet:              @screen-sm;

// Medium screen / desktop
@screen-md:                  992px;
@screen-desktop:             @screen-md;

// Large screen / wide desktop
@screen-lg:                  1200px;
@screen-lg-desktop:          @screen-lg;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}

padding-left: 7px;
padding-right: 8px;