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

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

---

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

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

---

Here's an approach that leaves the default collapse behavior unchanged while allowing a new section of navigation to always remain visible. Its an augmentation of navbar; navbar-header-menu is a CSS class I have created and is not part of Bootstrap proper.

Place this in the navbar-header element after 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>

Add this 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;
    }

Check the fiddle: http://jsfiddle.net/L2txunqo/

Caveat: navbar-right can be used to sort elements visually but is not guaranteed to pull the element to the furthest right portion of the screen. The fiddle demonstrates that behavior with the navbar-form.

---

If you're not using the less version, here is the line you need to change:

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

---

The following solution worked for me in 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>

참고 URL : https://stackoverflow.com/questions/23535289/bootstrap-3-disable-navbar-collapse