Twitter 부트 스트랩 반응 형을 사용하여 navbar 축소 임계 값을 변경하는 방법은 무엇입니까?

Programming

Twitter 부트 스트랩 반응 형을 사용하여 navbar 축소 임계 값을 변경하는 방법은 무엇입니까?

procodes 2020. 8. 28. 08:19

Twitter 부트 스트랩 반응 형을 사용하여 navbar 축소 임계 값을 변경하는 방법은 무엇입니까?

저는 Bootstrap-sass로 구현 된 Rails 3.1.2 프로젝트에서 Twitter Bootstrap 2.0.1을 사용하고 있습니다. bootstrap.css및 bootstrap-responsive.css파일 과 bootstrap-collapse.jsJavascript를 모두로드 하고 있습니다 .

예제 와 유사한 navbar가있는 유동적 인 레이아웃이 있습니다. 이것은 "반응 변화"지침 네비게이션 바에을 다음 여기에 . 잘 작동합니다. 페이지가 약 940px보다 좁 으면 탐색 모음이 축소되고 클릭하여 확장 할 수있는 "버튼"이 표시됩니다.

그러나 내 navbar는 약 550px 너비로보기 좋습니다. 즉, 화면이 매우 좁지 않으면 축소 할 필요가 없습니다.

화면 너비가 550px 미만인 경우에만 Bootstrap에 navbar를 축소하도록 지시하는 방법은 무엇입니까?

이 시점 에서 다른 반응 형 동작 (예 : 요소를 나란히 표시하는 대신 스택 쌓기)을 수정하고 싶지 않습니다 .

당신은 라인 239를 찾고 있습니다 bootstrap-responsive.css

@media (max-width: 979px) {...}

어디 max-width값이 반응 탐색을 트리거합니다. 550px 정도로 변경하면 크기가 잘 조정됩니다.

부트 스트랩> 2.1 && <3

더 적은 버전의 부트 스트랩 사용
variables.less에서 @navbarCollapseWidth 변수를 변경합니다.
다시 컴파일하십시오.

업데이트 2013 : 쉬운 방법

http://getbootstrap.com/customize/#less-variables를 방문하십시오.
양식 필드에서 @navbarCollapseWidth 변경
"컴파일 및 다운로드"를 클릭하십시오.

(댓글을 통해 THX에서 Archonic으로)

2014 업데이트 : Bootstrap 3.1.1 및 3.2 ( 문서에 추가하기도 함 )

있는 거 당신이 경우 사용자 정의 또는 편집 / 오버라이드 (override) .less변수를, 당신이 찾고있는 :

//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

당신은 새로운 설정할 수 있습니다 @media당신이 맞는 볼 아래 네비게이션 바에 요소를 삭제하는 쿼리를, 당신이 할 일은 원하는 드롭 폭으로 새 쿼리를 수용하기 위해 전자를 재설정합니다. 예를 들면 다음과 같습니다.

CSS

/** Modified Responsive CSS **/

@media (max-width: 979px) {
    .btn-navbar {
        display: none;
    }
    .navbar .nav-collapse {
        clear: none;
    }

    .nav-collapse {
        height: auto;
        overflow: auto;
    }

    .navbar .nav {
        float: left;
        margin: 0 10px 0 0;
    }

    .navbar .brand {
        margin-left: -20px;
        padding: 8px 20px 12px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: block;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 0;
        color: #999999;
        font-weight: normal;
        padding: 10px 10px 11px;
    }

    .navbar .nav > li {
        float: left;
    }

    .navbar .dropdown-menu {
        background-clip: padding-box;
        background-color: #FFFFFF;
        border-color: rgba(0, 0, 0, 0.2);
        border-radius: 0 0 5px 5px;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        display: none;
        float: left;
        left: 0;
        list-style: none outside none;
        margin: 0;
        min-width: 160px;
        padding: 4px 0;
        position: absolute;
        top: 100%;
        z-index: 1000;
    }

    .navbar-form, .navbar-search {
        border:none;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: left;
        margin-bottom: 0;
        margin-top:6px;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: right;
        margin-left: auto;
    }
}

@media (max-width: 550px) {
    .btn-navbar {
        display: block;
    }
    .navbar .nav-collapse {
        clear: left;
    }

    .nav-collapse {
        height: 0;
        overflow: hidden;
    }

    .navbar .nav {
        float: none;
        margin: 0 0 9px;
    }

    .navbar .brand {
        margin: 0 0 0 -5px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: none;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 3px 3px 3px 3px;
        color: #999999;
        font-weight: bold;
        padding: 6px 15px;
    }

    .navbar .nav > li {
        float: none;
    }

    .navbar .dropdown-menu {
        background-color: transparent;
        border: medium none;
        border-radius: 0 0 0 0;
        box-shadow: none;
        display: block;
        float: none;
        left: auto;
        margin: 0 15px;
        max-width: none;
        padding: 0;
        position: static;
        top: auto;
    }

    .navbar-form, .navbar-search {
        border-bottom: 1px solid #222222;
        border-top: 1px solid #222222;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: none;
        margin: 9px 0;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: none;
        margin-left: 0;
    }

}

다음 코드 @media에서 979px마크 앞의 드롭을 처리하는 원래 쿼리 와 원하는 드롭 포인트를 지원하는 새 쿼리를 어떻게 포함했는지 확인할 수 있습니다 550px. navbar 요소에 대한 특정 쿼리에 적용된 모든 스타일을 재설정하기 위해 부트 스트랩 응답 CSS에서 직접 원래 쿼리를 수정하고 대신 필요한 드롭 포인트를 전달하는 새 쿼리로 포팅했습니다. 이렇게하면 부트 스트랩 응답 스타일 시트를 엉망으로 만들지 않고 원본 쿼리에서 새 쿼리로 모든 스타일을 전달할 수 있습니다. 이렇게하면 기본값이 문서의 다른 요소에 계속 적용됩니다.

다음은 550px필요 에 따라 드롭하도록 설정된 미디어 쿼리가있는 짧은 데모입니다 . http://jsfiddle.net/wU8MW/

참고 : @media새로 수정 된 CSS가 반응 형 CSS보다 먼저로드되어야 하므로 위의 수정 된 쿼리를 CSS 프레임 아래에 배치했습니다 .

bootstrap-sass는 다음 버전 (2.2.1.0)에서 $ navbarCollapseWidth 변수를 지원합니다. 해당 버전이 출시되면 원하는 작업을 정확히 수행하도록 업데이트 할 수 있습니다!

2013 년 8 월 현재 부트 스트랩 3 "사용자 정의 및 다운로드"페이지는 http://getbootstrap.com/customize/ 에서 찾을 수 있습니다.

부트 스트랩 3에서 관련 변수는 @ grid-float-breakpoint입니다.

다음 스택 오버플로 페이지에는 추가 세부 정보가 있습니다. Bootstrap 3 Navbar Collapse

나는 이것이 곧 공식적인 방식으로 구현 될 것이라고 생각한다 (그리고 희망한다). 그 동안 저는 드롭 다운 버튼에 보이는 전화를 사용하고 탐색 모음에 배치 한 두 번째 버튼 세트에 보이는 태블릿을 사용하여 간단한 CSS 해킹을 수행하고 있습니다. 따라서 다음과 같이 보였습니다.

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="nav-collapse">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

이제 다음과 같이 보입니다.

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

요소의 순서가 중요합니다. 그렇지 않으면 다음 줄로 들어가는 요소에 문제가있을 수 있습니다.

부트 스트랩에 필요한 모든 부분을 나열하는 별도의 SCSS 파일을 만들었습니다. 이렇게하면 사이트에 필요한 부분에 따라 부분을 켜고 끌 수 있습니다. 이렇게하면 중단 점 변수를 쉽게 재정의 할 수 있습니다. 내가 얻은 것은 다음과 같습니다.

// Core variables and mixins
$grid-float-breakpoint: 991px;
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset
@import "bootstrap/normalize";
//@import "bootstrap/print";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
//@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/glyphicons";
@import "bootstrap/dropdowns";
//@import "bootstrap/button-groups";
//@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
//@import "bootstrap/jumbotron";
//@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
//@import "bootstrap/progress-bars";
//@import "bootstrap/media";
//@import "bootstrap/list-group";
@import "bootstrap/panels";
//@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
//@import "bootstrap/popovers";
//@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

여기에 내 코드가 있습니다 (다른 모든 솔루션은 탐색 막대가 드롭 다운 될 때 펑키 스크롤 막대를 보여 주므로 코드를 편집하지 않았습니다). 다른 답변에 게시 할 수 없으므로 다른 사람들이 찾을 수 있도록 여기에서 할 것입니다. 저는 레일을 사용하여 부트 스트랩 3.0으로이 작업을 수행하고 있습니다.

애셋 / 스타일 시트 / 프레임 워크 및이를 덮어 쓰면 다음과 같이 붙여 넣습니다.

@media (max-width: 2500px) {
.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;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

부트 스트랩 3.x

LESS를 사용 하면의 값을 변경 @screen-small하여 최소 크기를 타겟팅 할 수 있습니다.

예: @screen-small: 600px;

너비가 600px 미만일 때만 "작은 장치"모드로 전환하는 데 사용합니다.

부트 스트랩 3.x

SASS를 사용하면 $ screen-sm 값을 변경하여 최소 크기를 타겟팅 할 수 있습니다.

예 : $ screen-sm : 600px;

이 값은 @import "부트 스트랩"앞에 application.scss 파일에 넣어야합니다.

$screen-sm:600px;
@import "bootstrap";

"@"로 시작하는 더 적은 변수는 가져 오기 전에이를 대체하기 위해 "$"로 변경했습니다.

다음은 변수 목록입니다.

이것은 부트 스트랩 CSS 파일의 LESS 버전을 사용할 수있는 좋은 예입니다. 이를 수행하는 방법은 다음과 같습니다.

더 나은 방법은 Github에 풀 요청으로 제출하여 모든 사람이 혜택을받을 수 있도록하고 "커스텀 코드"가 앞으로 Bootstrap의 일부가되기를 바랍니다.

variables.less탐색 모음을 접을시기를 지정 하는 변수를에 추가하십시오 . 다음과 같은 것 :@navCollapseWidth: 979px
그런 다음 수정 responsive-navbar.less...
- 상단 변화까지 @media (max-width: 979px)로@media (max-width: @navCollapseWidth)
- 하단의 변경시 @media (min-width: 980px)에@media (max-width: @navCollapseWidth - 1)

물론 ... 제안 된 방법 중 하나를 사용하여 덜 컴파일해야 합니다 .

Taking tyler's hack even further by adding a visible-phone classed block and a hidden-phone class to an item in the main collapsible navigation, you can 'pull out' one or two of the collapsed items to display even in the phone navbar.

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="visible-phone">
        <ul class="nav">
          <li>Navigation 1</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="hidden-phone">Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Just write down this this code in your custom style.css file and it will work

@media (min-width: 768px) and (max-width: 991px) {
        .navbar-collapse.collapse {
            display: none !important;
        }
        .navbar-collapse.collapse.in {
            display: block !important;
        }
        .navbar-header .collapse, .navbar-toggle {
            display:block !important;
        }
        .navbar-header {
            float:none;
        }
        .navbar-nav {
            float: none !important;
            margin: 0px;
        }
        .navbar-nav {
            margin: 7.5px -15px;
        }
        .nav > li {
            position: relative;
            display: block;
        }
        .navbar-nav > li {
            float: none !important;
        }
        .nav > li > a {
            position: relative;
            display: block;
            padding: 10px 15px;
        }
        .navbar-collapse {
            padding-right: 15px;
            padding-left: 15px;
            overflow-x: visible;
            border-top: 1px solid transparent;
            box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
        }
        .nav {
            padding-left: 0px;
            margin-bottom: 0px;
            list-style: outside none none;
        }
    }

Bootstrap 4.x

It is a snap to change collapse threshold in Bootstrap 4.x. There are 6 cases:

Always expand, never collapse (i.e. breakpoint is 0px): <nav class="navbar navbar-expand">...</nav>
Breakpoint is sm (576px): <nav class="navbar navbar-expand-sm">...</nav>
Breakpoint is md (768px): <nav class="navbar navbar-expand-md">...</nav>
Breakpoint is lg (992px): <nav class="navbar navbar-expand-lg">...</nav>
Breakpoint is xl (1200px): <nav class="navbar navbar-expand-xl">.../nav>
Always collapse, never expand (i.e. breakpoint is ∞px). : <nav class="navbar">...</nav> (Just remove the navbar-expand-* class. Mobile-first as in Bootstrap 4.x)

Credit to this article by Carol Skelly I found https://medium.com/wdstack/examples-bootstrap-4-navbar-b3c9dc0edc1a

참고URL : https://stackoverflow.com/questions/9405610/how-to-change-navbar-collapse-threshold-using-twitter-bootstrap-responsive

'Programming' 카테고리의 다른 글

gson을 사용한 다형성 (0)	2020.08.28
Chrome에서 페이지로드시 Popstate (0)	2020.08.28
Git-병합 중 파일 무시 (0)	2020.08.28
cacerts와 keystore의 차이점은 무엇입니까? (0)	2020.08.28
sklearn 오류 ValueError : 입력에 NaN, 무한대 또는 dtype ( 'float64')에 비해 너무 큰 값이 있습니다. (0)	2020.08.28

현재글Twitter 부트 스트랩 반응 형을 사용하여 navbar 축소 임계 값을 변경하는 방법은 무엇입니까?

procodes

Twitter 부트 스트랩 반응 형을 사용하여 navbar 축소 임계 값을 변경하는 방법은 무엇입니까?

Twitter 부트 스트랩 반응 형을 사용하여 navbar 축소 임계 값을 변경하는 방법은 무엇입니까?

부트 스트랩> 2.1 && <3

부트 스트랩 3.x

'Programming' 카테고리의 다른 글

'Programming'의 다른글

티스토리툴바

Twitter 부트 스트랩 반응 형을 사용하여 navbar 축소 임계 값을 변경하는 방법은 무엇입니까?

Twitter 부트 스트랩 반응 형을 사용하여 navbar 축소 임계 값을 변경하는 방법은 무엇입니까?

부트 스트랩> 2.1 && <3

부트 스트랩 3.x

'Programming' 카테고리의 다른 글

'Programming'의 다른글

관련글

티스토리툴바