LESS를 사용하지 않고 부트 스트랩 탐색 모음 축소 중단 점 변경

현재 브라우저 너비가 768px 아래로 떨어지면 탐색 표시 줄이 축소 모드로 변경됩니다. 이 너비를 1000px로 변경하여 브라우저가 1000px 미만이면 탐색 표시 줄이 축소 모드로 변경됩니다. LESS를 사용하지 않고이 작업을 수행하고 싶습니다 .LESS가 아닌 스타일러스를 사용하고 있습니다.

내 문제는이 질문과 동일합니다 : Bootstrap 3 Navbar Collapse

그러나 그 질문에 대한 모든 대답은 LESS 변수를 변경하여 수행하는 방법을 설명합니다. 나는 LESS를 다루지 않고 스타일러스를 사용하고 있으므로 스타일러스 또는 다른 방법을 사용 하여이 작업을 수행하는 방법을 알고 싶습니다.

감사!

질문에서 768px 미만 으로 특정 미디어 쿼리 를 작성해야 합니다. 탐색기가 축소되므로 768px 이상 1000px 미만으로 적용하십시오.

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

부트 스트랩 장치가 기본적으로 나타날 때까지 탐색 모음 축소가 숨겨집니다. 축소 클래스가 뒤집 히면 탐색 모음 내부의 내부 자산이 자동으로 숨겨집니다. 마치 원하는 디자인으로 CSS를 설정해야합니다.

2018 업데이트

부트 스트랩 4

Bootstrap 4에서 navbar-expand-*클래스를 사용하여 탐색 표시 줄 중단 점을 쉽게 변경할 수 있습니다.

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

• navbar-expand-sm = xs 화면의 모바일 메뉴 <576px
• navbar-expand-md = <768px의 sm 화면에서 모바일 메뉴
• navbar-expand-lg = MD 화면의 모바일 메뉴 <992px
• navbar-expand-xl = LG 화면의 모바일 메뉴 <1200px
• navbar-expand = 모바일 메뉴를 사용하지 마십시오
• (no expand class) = 항상 모바일 메뉴 사용

제외 navbar-expand-*하면 모바일 메뉴가 all너비 로 사용됩니다 . 6 가지 navbar 상태에 대한 데모는 다음과 같습니다. Bootstrap 4 Navbar 예제

작은 CSS를 추가하여 사용자 정의 중단 점 (??? px)을 사용할 수도 있습니다. 예를 들어 여기 1300px입니다.

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

부트 스트랩 4 사용자 정의 Navbar 중단 점
부트 스트랩 4 Navbar 중단 점 예

Bootstrap 3.3.x의 경우 탐색 막대 중단 점을 재정의하는 작동하는 CSS가 있습니다. 991px탐색 표시 줄을 접을 지점의 픽셀 치수로 변경하십시오 .

@media (max-width: 991px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
}

991px의 작업 예 : http://www.bootply.com/j7XJuaE5v6 1200px의
작업 예 : https://www.codeply.com/go/VsYaOLzfb4 (검색 양식)

참고 : 위는 768px 이상에서 작동합니다 . 768px 미만 으로 변경해야하는 경우 768px 미만 의 예는 여기에 있습니다 .

에 bootstrap3 ,이 변수를 변경 @ 그리드 플로트 중단 점을 당신이 필요로하는 하나. 기본값은 768px입니다

마지막으로 http://getbootstrap.com/customize/ 에서 '@ grid-float-breakpoint'를 사용하여 축소 너비를 변경하는 방법을 알아 냈습니다 .

bootstrap.css (또한 최소 버전)의 2923 행으로 이동 @media screen and (min-width: 768px) {하여@media screen and (min-width: 1000px) {

따라서 코드는 다음과 같습니다.

@media screen and (min-width: 1000px) {
  .navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
  }
  .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none;
  }
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

방금 다음 CSS 코드를 사용 하여이 작업을 성공적으로 수행했습니다.

@media(max-width:1000px)  {

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

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

    .collapse.in {
      display: block !important;
    }

}

부트 스트랩 3 .LESS의에서 소스 코드 에 정의 된 변수가있다 variables.less라는 @grid-float-breakpoint다음과 같은 도움이되는 의견을 가지고 :

//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;

일치하는 @grid-float-breakpoint-max값은 1에서 1px로 설정됩니다.

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

해결책:

그래서 그냥 설정 @grid-float-breakpoint대신 1000px에 값을하고 다시 bootstrap.less로 bootstrap.css:

예 :

@grid-float-breakpoint: 1000px;

부트 스트랩 변수를 변경하는 Sass 방식은 실제로 bootstrap-sass github 페이지 에 문서화되어 있습니다.

부트 스트랩을 가져 오기 전에 변수를 다시 정의하십시오.

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

@Skely 답변 외에도 탐색 표시 줄의 드롭 다운 메뉴를 작동 시키려면 클래스를 추가하여 재정의하십시오. 최종 코드는 다음과 같습니다.

    @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .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;*/
            margin: 7.5px 50px 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;
        }
    }

데모 코드

부트 스트랩 v4에서 다른 CSS 클래스를 사용하여 탐색을 조만간 접을 수 있습니다.

예 :

• navbar-toggleable-sm
• 탐색 바 전환 가능 md
• navbar-toggleable-lg

탐색 버튼으로 :

• 숨겨진 SM 업
• 숨겨진 MD 업
• 숨겨진 LG- 업

Bootstrap 3.3의 경우 이것이 필요한 유일한 코드입니다.

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}

이것은 나를 위해 일했다.

@media (min-width: 768px) {
    .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;
      }
}

이 두 가지를 알아내는 데 시간이 걸렸습니다.

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

가장 좋은 방법은 사용하는 CSS 프로세서의 포트를 사용하는 것입니다.

나는 SASS의 열렬한 팬이므로 현재 https://github.com/thomas-mcdonald/bootstrap-sass를 사용합니다.

여기 스타일러스 포크가있는 것 같습니다 : https://github.com/Acquisio/bootstrap-stylus

그렇지 않으면 검색 및 바꾸기가 CSS 버전에서 가장 친한 친구입니다 ...

안녕하세요, CSS를 사용하여 중단 점 부트 스트랩 메뉴를 변경할 수 있다고 생각합니다.

    @media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important; 
    }
    .navbar-nav>li {
        float: none;
    } 
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}

Navbar는 .navbar-toggler, .navbar-collapse 및 .navbar-expand {-sm | -md | -lg | -xl} 클래스를 사용하여 내용이 버튼 뒤에서 접힐 때 변경 될 수 있습니다. 다른 유틸리티와 함께 ​​특정 요소를 표시하거나 숨길시기를 쉽게 선택할 수 있습니다.

축소되지 않는 탐색 모음의 경우 탐색 모음에 .navbar-expand 클래스를 추가하십시오. 항상 축소되는 탐색 모음의 경우 .navbar-expand 클래스를 추가하지 마십시오.

예를 들면 다음과 같습니다.

<nav class="navbar navbar-expand-lg"></nav>

모바일 메뉴가 큰 화면으로 표시됩니다.

참조 : https://getbootstrap.com/docs/4.0/components/navbar/

이것이 나를 위해 마술을 한 것입니다.

@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}

부트 스트랩 4에서 navbar-expand- *를 무시하고 확장하고 축소하고 햄버거 (navbar-toggler)를 표시하거나 숨기려면 bootstrap.css에서 해당 스타일 / 정의를 찾아서 재정의해야합니다. 자신 만의 customstyle.css (또는 기울어 진 경우 bootstrap.css에 직접)

예 : navbar-expand-lg가 축소되고 950px의 navbar-toggler가 표시되기를 원했습니다. bootstrap.css에서 다음을 찾습니다.

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

그리고 그 아래에 ...

@media (min-width:992px) { 
    ... lots of styling ...
}

@media 쿼리를 모두 복사하여 style.css에 넣은 다음 필요에 맞게 크기를 수정했습니다. 내 경우에는 950px로 축소하고 싶었습니다. @ media 쿼리는 크기가 달라야합니다 (추측). 컨테이너 최대 너비를 949.98px로 설정하고 다른 @media 쿼리에 950px를 사용했기 때문에 다음 코드가 style.css에 추가되었습니다. 이것은 Stackoverflow 및 다른 곳에서 찾은 꼬인 솔루션과 쉽게 분리 할 수 ​​없었습니다. 도움이 되었기를 바랍니다.

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}

여기에 부트 스트랩으로 React에서 사용하는 작업 코드가 있습니다.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<style>
  @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
  </style>

이제 Bootstrap 4.4에서 지원됩니다

navbar-expand-sm