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

Program / 글쓴이

현재 브라우저 너비가 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 중단 점 예

부트 스트랩 3

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