[css] 부트 스트랩 3-navbar 축소 비활성화

Program / 글쓴이

이것은 내 간단한 탐색 모음입니다.

<div class="navbar navbar-fixed-top myfont" role="navigation">
    <div class="">
        <ul class="nav navbar-nav navbar-left">
            <li>
                <a class="navbar-brand" href="#">
                    <img src="assets/img/logo.png"/>
                </a>
            </li>
            <li>
                <button class="btn btn-navbar">
                    <i class="fa fa-edit"></i>
                    Create
                </button>
            </li>
        </ul>
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li data-match-route="/"><a href="#/page-one">Login</a></li>
        <li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li>
    </ul>
</div>

이게 무너지는 것을 막고 싶습니다. 필요하지 않기 때문입니다. 어떻게해야합니까?

기본 스타일을 재정의하기 위해 300K 줄의 CSS를 작성하는 것을 피하고 싶습니다.

어떠한 제안?

답변

자세히 살펴본 후 30 만 줄이 아니라 약 3-4 개의 CSS 속성을 재정의해야합니다.

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

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}

그리고 이것으로 당신의 메뉴는 무너지지 않을 것입니다.

데모 ( jsfiddle )

설명

네 가지 CSS 속성은 각각 다음을 수행합니다.

  1. .collapse부트 스트랩 의 기본 속성은 태블릿 (가로) 및 휴대폰의 메뉴 오른쪽을 숨기고 대신 토글 버튼을 표시하여 숨기거나 표시합니다. 따라서이 속성은 기본값을 재정의하고 해당 요소를 지속적으로 표시합니다.

  2. 오른쪽 메뉴가 왼쪽과 같은 줄에 나타나려면 왼쪽이 왼쪽으로 떠 있어야합니다.

  3. 이 속성은 기본적으로 부트 스트랩에 있지만 태블릿 (세로)에서는 전화 해상도가 아닙니다. 이 항목을 건너 뛸 수 있으며 전체 탐색 모음에 영향을주지 않을 것입니다.

  4. 이렇게하면 오른쪽 메뉴가 오른쪽으로 유지되고 내부 요소 ( li)는 속성 2를 따릅니다. 따라서 왼쪽 부동 소수점 왼쪽 과 오른쪽 부동 오른쪽 이 한 줄로 가져옵니다.

답변

nabvar는 소형 장치에서 축소됩니다. 붕괴 지점은 @grid-float-breakpoint변수에 의해 정의됩니다 . 기본적으로 이것은 이전에 이루어 768px집니다. 768화면 너비 가 픽셀 미만인 화면의 경우 탐색 모음은 다음과 같습니다.

여기에 이미지 설명 입력

@grid-float-breakpointin variables.less 를 변경하고 부트 스트랩을 다시 컴파일 할 수 있습니다 . 이 작업을 수행 할 때 @screen-xs-maxnavbar.less에서도 변경해야합니다 . 이 값을 새 @grid-float-breakpoint -1. 참조 : https://github.com/twbs/bootstrap/pull/10465 . 이것은 @ grid-float-breakpoint에서 navbar 양식과 드롭 다운을 모바일 버전으로 변경하는 데 필요합니다.

가장 쉬운 방법은 부트 스트랩을 사용자 지정하는 것입니다.

변수 찾기 :

 @grid-float-breakpoint

로 설정 @screen-sm되어 있으면 필요에 따라 변경할 수 있습니다. 도움이 되었기를 바랍니다.

SAAS 사용자 용

$grid-float-breakpoint: 0px;이전 과 같이 맞춤 변수를 추가하십시오 .@import "bootstrap.scss";

답변

다음은 새 탐색 섹션이 항상 표시되도록 허용하면서 기본 축소 동작을 변경하지 않는 방식입니다. 그것의 증가 navbar; navbar-header-menu내가 만든 CSS 클래스이며 적절한 Bootstrap의 일부가 아닙니다.

다음 navbar-header요소에 다음을 배치하십시오 navbar-brand.

<div class="navbar-header-menu">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">I'm always visible</a></li>
    </ul>
    <form class="navbar-form" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>

이 CSS를 추가하십시오.

.navbar-header-menu {
    float: left;
}

    .navbar-header-menu > .navbar-nav {
        float: left;
        margin: 0;
    }

        .navbar-header-menu > .navbar-nav > li {
            float: left;
        }

            .navbar-header-menu > .navbar-nav > li > a {
                padding-top: 15px;
                padding-bottom: 15px;
            }

        .navbar-header-menu > .navbar-nav .open .dropdown-menu {
            position: absolute;
            float: left;
            width: auto;
            margin-top: 0;
            background-color: #fff;
            border: 1px solid #ccc;
            border: 1px solid rgba(0,0,0,.15);
            -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
            box-shadow: 0 6px 12px rgba(0,0,0,.175);
        }

    .navbar-header-menu > .navbar-form {
        float: left;
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

        .navbar-header-menu > .navbar-form > .form-group {
            display: inline-block;
            margin-bottom: 0;
            vertical-align: middle;
        }

    .navbar-header-menu > .navbar-left {
        float: left;
    }

    .navbar-header-menu > .navbar-right {
        float: right !important;
    }

    .navbar-header-menu > *.navbar-right:last-child {
        margin-right: -15px !important;
    }

바이올린 확인 : http://jsfiddle.net/L2txunqo/

주의 사항 : navbar-right요소를 시각적으로 정렬하는 데 사용할 수 있지만 요소를 화면의 가장 오른쪽 부분으로 당기는 것이 보장되지는 않습니다. 바이올린은 navbar-form.

답변

더 적은 버전을 사용하지 않는 경우 변경해야 할 줄은 다음과 같습니다.

@media (max-width: 767px) { /* Change this to 0 */
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 20px;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
}

답변

다음 솔루션은 Bootstrap 3.3.4에서 저에게 효과적이었습니다.

CSS :

/*no collapse*/

.navbar-collapse.collapse.off {
    display: block!important;
}
.navbar-collapse.collapse.off ul {
    margin: 0;
    padding: 0;
}

.navbar-nav.no-collapse>li,
.navbar-nav.no-collapse {
    float: left !important;
}

.navbar-right.no-collapse {
    float: right!important;
}

그런 다음 .no-collapse 클래스를 각 목록에 추가하고 .off 클래스를 기본 컨테이너에 추가합니다. 다음은 jade로 작성된 예입니다.

nav.navbar.navbar-default.navbar-fixed-top
        .container-fluid
            .collapse.navbar-collapse.off
                ul.nav.navbar-nav.no-collapse
                    li
                        a(href='#' class='glyph')
                            i(class='glyphicon glyphicon-info-sign')
                ul.nav.navbar-nav.navbar-right.no-collapse
                    li.dropdown
                        a.dropdown-toggle(href='#', data-toggle='dropdown' role='button' aria-expanded='false')
                            | Tools
                            span.caret
                        ul.dropdown-menu(role='menu')
                            li
                                a(href='#') Tool #1
                    li
                        a(href='#')
                            | Logout

답변

또 다른 방법은 collapse navbar-collapse마크 업에서 간단히 제거 하는 것입니다. 부트 스트랩 3.3.7의 예

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-atp">
  <div class="container-fluid">
    <div class="">
      <ul class="nav navbar-nav nav-custom">
        <li>
          <a href="#" id="sidebar-btn"><span class="fa fa-bars">Toggle btn</span></a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>Nav item</li>
      </ul>
    </div>
  </div>
</nav>

스 니펫 확장

답변