부트스트랩 navbar 접힘 중단점 변경 방법

programing

부트스트랩 navbar 접힘 중단점 변경 방법

testmans 2023. 8. 23. 21:40

부트스트랩 navbar 접힘 중단점 변경 방법

현재 브라우저 너비가 768px 이하로 떨어지면 탐색 모음은 축소 모드로 변경됩니다.브라우저가 1000px 미만일 때 navbar가 접힌 모드로 변경되도록 이 너비를 1000px로 변경하고 싶습니다.LESS를 사용하지 않고 하고 싶습니다. LESS가 아닌 스타일러스를 사용하고 있습니다.

내 문제는 이 질문과 동일합니다.부트스트랩 3 Navbar 접힘

하지만 이 질문의 모든 답은 LESS 변수를 변경하여 이를 수행하는 방법을 설명합니다.저는 LESS를 다뤄본 적이 없고, 스타일러스를 사용하고 있어서 스타일러스나 다른 방법으로 어떻게 처리할 수 있는지 알고 싶습니다.

감사합니다!

부트스트랩 5(2023 업데이트)

서류에 명시된 바와 같이,

접히지 않는 탐색 막대의 경우.navbar-expandnavbar의 클래스.항상 접히는 탐색 모음의 경우 추가하지 않음.navbar-expand학생들

부트스트랩 4(2018년 업데이트)

에서는 Navbar를 하여 중단점을 이 더 .navbar-expand-*클래스:

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

navbar-expand-sm화면의 < 화면모메뉴일 <576>
navbar-expand-md화면의 < pxsm 면일메뉴모바 <768>
navbar-expand-lg화면의 <992 화md 의 <992 >
navbar-expand-xl화면의 <> 모바일 메뉴판 <mobile menu>
navbar-expand 메뉴를 하지 마세요.
(no expand class) 합니다.

를 하면,navbar-expand-*모바일 메뉴는 다음 위치에서 사용됩니다.all폭다음은 6개의 모든 Navbar 상태에 대한 데모입니다.부트스트랩 4 Navbar 예제

또한 사용자 지정 중단점(??)을 사용할 수도 있습니다.px) 약간의 CSS를 추가함으로써.예를 들어, 여기 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 .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-custom .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom > .container {
        flex-wrap: nowrap;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
        flex-basis: auto;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

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

부트스트랩 3

부트스트랩 3.3.x의 경우 navbar 중단점을 재정의하기 위해 작동하는 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;
  }
}

991개 사이트에 대한 작업 예제: https://codeply.com/p/GxWMLj14VJ
1200개 문서에 대한 작업 예제: https://codeply.com/go/VsYaOLzfb4 (검색 양식 포함)

참고: 위는 768px 이상에서 작동합니다.768px 미만으로 변경해야 하는 경우에는 768px 미만의 예를 참조하십시오.

이에 대한 특정 미디어 쿼리를 작성해야 합니다. 질문에서 768px 이하에서는 navbar가 붕괴되므로 768px 이상에서는 1000px 이하에서는 다음과 같이 적용합니다.

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

이렇게 하면 부트스트랩 장치가 기본적으로 발생할 때까지 navbar 축소가 숨겨집니다.축소 클래스가 플립되면 navbar 축소 내부의 내부 자산이 자동으로 숨겨집니다. 마찬가지로 CSS를 원하는 설계로 설정해야 합니다.

부트스트랩3에서 이 변수 @grid-vlan-breakpoint를 필요한 변수로 변경합니다.기본값은 768px입니다.

마지막으로 http://getbootstrap.com/customize/ 에서 '@grid-break-breakpoint'를 조작하여 붕괴 폭을 변경하는 방법을 알아냈습니다.

버전도 의하여 bootstrap.css("bootstrap.css")를 변경합니다.@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'로되어 있습니다. 즉, 1'은 마이너스 1입니다.

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

솔루션:

그래서 그냥 설정해주세요.@grid-float-breakpoint하고 1000을 다시 작성합니다.bootstrap.less안으로bootstrap.css:

예.

@grid-float-breakpoint: 1000px;

부트스트랩 변수를 변경하는 Sass 방법은 실제로 부트스트랩-assass github 페이지에 설명되어 있습니다.

@import bootstrap을(를) 가져오기 전에 변수를 다시 정의합니다.

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

@Skely answer 외에도, navbar 내부의 드롭다운 메뉴를 작동시키려면 해당 클래스를 재정의하도록 추가합니다.아래의 최종 코드:

    @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-consummable-sm
navbar-configurable-md
navbar-configurable-lg

탐색 버튼을 사용하여:

은폐 공작
비밀 공작의
몰래 접속한

이것은 나에게 효과가 있었습니다 부트스트랩3.

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

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

당신이 사용하는 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 링크도 작동합니다.)

@media (max-width: 1199px) {
  .navbar-nav {
    margin: 7.5px -15px;
 }
  .ul-links {
    display: block;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
  }  
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }

  .navbar-collapse.collapse {
      display: none!important;
      max-height: none;
  }
  .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;
  }
}

이것이 제게 도움이 된 비결입니다.

@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-togler)를 표시 및 숨기기를 원한다면 bootstrap.css에서 해당 스타일/정의를 찾고, 자신의 사용자 정의 style.css(또는 그렇게 원한다면 bootstrap.css에서 직접)로 재정의해야 합니다.

예. 나는 navbar-expand-lg가 붕괴되기를 원했고 950px에서 navbar-togler를 보여줍니다.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를 사용하여 다음 코드가 내 스타일.css에 추가되었습니다.이것은 스택 오버플로 및 다른 곳에서 찾은 뒤틀린 솔루션에서 풀기가 쉽지 않았습니다.이게 도움이 되길 바랍니다.

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

여기 부트스트랩과 반응에서 사용하는 내 작업 코드입니다.

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

이제 부트스트랩 4.4에서 지원됩니다.

navbar-expand-sm

언급URL : https://stackoverflow.com/questions/19827605/how-to-change-bootstrap-navbar-collapse-breakpoint

'programing' 카테고리의 다른 글

미디어 쿼리 - 두 폭 사이 (0)	2023.08.23
API 통합 오류 코드 4000 (0)	2023.08.23
jQuery: 클래스 및 입력 유형별 선택 (0)	2023.08.23
URL이 더 이상 작동하지 않도록 요청하는 Ajax 명령 (0)	2023.08.23
RecyclerView with GridLayoutManager를 사용한 간단한 Android 그리드 예제(이전의 GridView와 동일) (0)	2023.08.23

현재글부트스트랩 navbar 접힘 중단점 변경 방법

각종 프로그래밍 정보를 다루는 블로그입니다.

ASP.NET, reactjs, mysql, typescript, Excel, spring-boot, JSON, mongodb, mariaDB, oracle, Wordpress, JQuery, CSS, git, AJAX, AngularJS, sql-server, Python, C, iphone,

Today :
Yesterday :

testman

부트스트랩 navbar 접힘 중단점 변경 방법

부트스트랩 navbar 접힘 중단점 변경 방법

솔루션:

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

부트스트랩 navbar 접힘 중단점 변경 방법

부트스트랩 navbar 접힘 중단점 변경 방법

솔루션:

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바