부트 스트랩 3 Navbar 접기

부트 스트랩 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; }
}

---

I did the CSS way with my install of Bootstrap 3.0.0, since I am not that familiar with LESS. Here is the code that I added to my custom css file (which I load after bootstrap.css) which allowed me to control so the menu was always working like an accordion.
Note: I wrapped my whole navbar inside a div with the class sidebar to separate out the behavior I wanted so it did not affect other navbars on my site, like the main menu. Adjust along your needs, hope it is of help.

/* 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;
}

Additional note: I also added a change to the toggle of the main menu navbar (since the code above on my site is used for a "submenu" on the side.

I changed:

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

into:

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

And then also adjusted:

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

into:

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

If you will only have one navbar I guess you will not need to worry about this, but it helped me in my case.

---

And for those who want to collapse at a width less than the standard 768px (expand at a width less than 768px), this is the css needed:

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

---

I think I found a simple solution to changing the collapse breakpoint, only through css.

I hope others can confirm it since I didn't test it thoroughly and I'm not sure if there are side effects to this solution.

You have to change the media query values for the following class definitions:

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

This is what worked for me on my current project, but I still need to change some css definitions to arrange the menu properly for all screen sizes.

Hope this helps.

참고URL : https://stackoverflow.com/questions/18192082/bootstrap-3-navbar-collapse