부트 스트랩 3 Navbar 접기

부트 스트랩 3 탐색 모음이 접히는 지점을 늘릴 수있는 방법이 있습니까 (즉, 세로 태블릿에서 드롭 다운으로 축소되도록)?

이 두 가지는 부트 스트랩 2에 적용되었지만 지금은 아닙니다!

Twitter 부트 스트랩 응답을 사용하여 탐색 모음 축소 임계 값을 변경하는 방법은 무엇입니까?

기본 반응 형 탐색 표시 줄 중단 점 변경

나는 오늘 같은 문제가 있었다.

부트 스트랩 4

기본 기능 : https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

.navbar-expand{-sm|-md|-lg|-xl}수업 을 사용해야합니다 :

<nav class="navbar navbar-expand-md navbar-light bg-light">

부트 스트랩 3

@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-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

그냥 변경 991px에 의해 1199px에 대한 md크기.

데모

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

@ screen-sm으로 설정되어 있으면 필요에 따라 변경할 수 있습니다. 그것이 도움이되기를 바랍니다!

이들은 변수로 제어되며 소스에서 뭉칠 필요가 없습니다. 부트 스트랩으로 변수를 먼저 시도한 다음 재정의하십시오. 그런 다음 돌아가서 변수를 다시 시도하십시오.)

레일에 부트 스트랩을 사용했지만 기본 LESS와 동일합니다.

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";

그게 다야! 이 변수 참조 페이지는 매우 유용합니다 : https://github.com/twbs/bootstrap/blob/master/less/variables.less

Seb33300 덕분 에이 작업을 수행했습니다. 그러나 중요한 부분이없는 것 같습니다. 적어도 Bootstrap 버전 3.1.1에서는.

내 문제는 탐색 표시 줄이 올바른 너비로 축소되었지만 메뉴 버튼이 작동하지 않는다는 것입니다. 메뉴를 확장하거나 축소 할 수 없습니다.

.navbar-collapse.collapse의! important가 collapse.in 클래스를 재정의하고 "collapse.in"을 추가하여 해결할 수 있기 때문입니다. Seb33300의 예는 다음과 같습니다.

@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;
    }
}

jmbertucci의 답변에 대해 찬성하고 의견을 말하고 싶었지만 컨트롤을 아직 신뢰하지 않았습니다. 나는 같은 문제가 있었고 그가 말한대로 해결했습니다. Bootstrap 3.0을 사용하는 경우 variables.less에서 LESS 변수를 편집하십시오. 반응 형 중단 점은 200 행 주위에 설정됩니다.

@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);

그런 다음 약 232 행에서 @ grid-float-breakpoint 변수를 사용하여 탐색 모음의 축소 값을 설정하십시오 . 기본적으로 @ screen-tablet로 설정되어 있습니다 . 원하는 경우 픽셀 값을 사용할 수 있지만 LESS 변수를 사용하는 것이 좋습니다.

메뉴에 여러 줄로 된 문제가있는 경우 다음 중 하나를 시도해보십시오.

1) 메뉴 항목 제거 또는 단어 단축과 같이 메뉴 항목 수 또는 길이를 줄이십시오.

2) 다음과 같이 메뉴 항목 사이의 패딩을 줄입니다.

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

기본 패딩은 양면 15 픽셀입니다 (왼쪽 및 오른쪽).

각 개별 측면을 변경하려면 다음을 사용하십시오.

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

이 설정은 드롭 다운 목록에도 영향을줍니다.

이것은 질문에 대답하지 않지만 CSS를 엉망으로 만들거나 LESS 변수를 사용하지 않으려는 다른 사람들에게 도움이 될 수 있습니다. 이 문제를 해결하기위한 두 가지 일반적인 접근법.

작은 장치에서 nabvar가 축소됩니다. 붕괴 지점은 변수에서 @ grid-float-breakpoint에 의해 정의됩니다. 기본적으로 768px 이전입니다. 화면 너비가 768 픽셀 미만인 화면의 경우 탐색 표시 줄은 다음과 같습니다.

variables.less에서 @ grid-float-breakpoint를 변경하고 부트 스트랩을 다시 컴파일 할 수 있습니다. 이 작업을 수행 할 때 navbar.less에서 @ screen-xs-max도 변경해야합니다. 이 값을 새로운 @ grid-float-breakpoint -1로 설정해야합니다. https://github.com/twbs/bootstrap/pull/10465 도 참조 하십시오 . @ grid-float-breakpoint에서 탐색 표시 줄 양식 및 드롭 다운을 모바일 버전으로 변경하는 데 필요합니다.

Bootstrap을 사용자 정의하여 유지 관리 및 업그레이드 문제가 걱정됩니다. 오늘 사용자 정의 단계를 문서화 할 수 있으며 3 년 후 부트 스트랩을 업그레이드하는 사람이 문서를 찾아 단계를 다시 적용하기를 희망합니다 (이 시점에서 작동하거나 작동하지 않을 수 있음). 어느 쪽이든 인수를 할 수 있다고 생각하지만 내 코드에서 사용자 정의를 유지하는 것을 선호합니다.

그래도 Seb33300의 접근 방식이 어떻게 작동하는지 잘 모르겠습니다. Bootstrap 4.0.3에서는 작동하지 않았습니다. 탐색 모음이 768 대신 1200에서 확장 되려면 768에서 확장하지 않고 강제로 1200에서 확장되지 않도록 두 미디어 쿼리에 대한 규칙을 재정의해야합니다.

세로 모드에서 iPad를 감싸는 더 긴 메뉴가 있습니다. 다음은 1200 중단 점까지 메뉴를 축소 된 상태로 유지합니다.

@media (min-width: 768px) {
    .navbar-header {
        float: none; }
    .navbar-toggle {
        display: block; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px; }
    .navbar-collapse.collapse {
        display: none !important; }
        .navbar-collapse.collapse.in { 
        display: block!important; 
        margin-top: 0px; }
}
@media (min-width: 1200px) {
    .navbar-header {
        float: left; }
    .navbar-toggle {
    display: none; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        display: block !important; }
}

나는 LESS에 익숙하지 않기 때문에 Bootstrap 3.0.0 설치로 CSS 방식을 수행했습니다. 다음은 사용자 정의 CSS 파일 (bootstrap.css 다음에로드)에 추가 한 코드로, 메뉴를 항상처럼 작동하도록 제어 할 수있었습니다 accordion.
참고 : 나는 메인 메뉴와 같이 내 사이트의 다른 탐색 표시 줄에 영향을 미치지 않도록 원하는 동작을 분리하기 navbar위해 클래스 sidebar로 div 안에 전체를 감쌌습니다. 필요에 따라 조정하고 도움이 되길 바랍니다.

/* Sidebar Menu Fix */

.sidebar .navbar-nav {
  margin: 7.5px -15px;
}
.sidebar .navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.sidebar .navbar-collapse {
  max-height: 500px;
}
.sidebar .navbar-nav .open .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
.sidebar .dropdown-menu > li > a {
  color: #777777;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #333333;
  background-color: transparent;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #555555;
  background-color: #e7e7e7;
}
.sidebar .navbar-nav {
  float: none;
}
.sidebar .navbar-nav > li {
  float: none;
}

추가 참고 사항 : 또한 메인 메뉴의 토글에 변경 사항을 추가했습니다 navbar(내 사이트의 위 코드가 측면의 "하위 메뉴"에 사용되기 때문에).

나는 바꿨다 :

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

으로:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-topmenu">

그런 다음 조정했습니다.

<div class="navbar-collapse collapse navbar-collapse">

으로:

<div class="navbar-collapse collapse navbar-collapse-topmenu">

하나만 가지고 있다면 navbar이것에 대해 걱정할 필요가 없지만 내 경우에 도움이되었습니다.

그리고 폭으로 축소하고자하는 사람들을 위해 적은 표준 768px보다이 필요한 CSS는 (이하 768px보다 폭 확대) :

@media (min-width: 600px) {
.navbar-header {
        float: left;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0 none;
    box-shadow: none;
    width: auto;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left !important;
    margin: 0;
}
.navbar-nav>li {
    float: left;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
}

CSS를 통해서만 축소 중단 점을 변경하는 간단한 해결책을 찾았습니다.

철저히 테스트하지 않았기 때문에 다른 사람들이 확인할 수 있기를 바랍니다.이 솔루션에 부작용이 있는지 확실하지 않습니다.

다음 클래스 정의에 대한 미디어 쿼리 값을 변경해야합니다.

@media (min-width: BREAKPOINT px ){
    .navbar-toggle{display:none}
}

@media (min-width: BREAKPOINT px){
    .navbar-collapse{
        width:auto;
        border-top:0;box-shadow:none
    }
    .navbar-collapse.collapse{
        display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important
    }
    .navbar-collapse.in{
        overflow-y:visible
   }
   .navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{
        padding-left:0;padding-right:0
    }
}

이것이 현재 프로젝트에서 나를 위해 일한 것이지만 모든 화면 크기에 맞게 메뉴를 올바르게 정렬하려면 CSS 정의를 변경해야합니다.

도움이 되었기를 바랍니다.