[css] 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";