Bootstrap 3 - vô hiệu hóa tính năng thu gọn thanh điều hướng

Đây là thanh điều hướng đơn giản của tôi:

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

Tôi chỉ muốn ngăn chặn điều này sụp đổ, vì tôi không cần nó, làm thế nào để làm gì?

Tôi muốn tránh viết 300K dòng CSS để ghi đè các kiểu mặc định.

Bất kì lời đề nghị nào?

Sau khi kiểm tra kỹ, không phải 300k dòng mà có khoảng 3-4 thuộc tính CSS mà bạn cần ghi đè:

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

Và với điều này, menu của bạn sẽ không bị sụp đổ.

DEMO ( jsfiddle )

GIẢI TRÌNH

Bốn thuộc tính CSS tương ứng với nhau:

1. .collapseThuộc tính mặc định trong bootstrap ẩn phía bên phải của menu cho máy tính bảng (ngang) và điện thoại và thay vào đó một nút bật tắt được hiển thị để ẩn / hiện nó. Do đó thuộc tính này ghi đè mặc định và hiển thị liên tục các phần tử đó.

2. Để menu bên phải xuất hiện trên cùng một dòng với bên trái, chúng ta cần phần bên trái nổi bên trái.

3. Thuộc tính này hiển thị theo mặc định trong bootstrap nhưng không có trên máy tính bảng (dọc) với độ phân giải điện thoại. Bạn có thể bỏ qua phần này, nó có khả năng không ảnh hưởng đến thanh điều hướng tổng thể của bạn.

4. Điều này giữ cho menu bên phải ở bên phải trong khi các phần tử bên trong ( li) sẽ tuân theo thuộc tính 2. Vì vậy, chúng tôi có float bên trái bên trái và bên phải float bên phải đưa chúng vào một dòng.

Nabvar sẽ bị sập trên các thiết bị nhỏ. Điểm sụp đổ được xác định bởi @grid-float-breakpointcác biến. Theo mặc định, điều này sẽ xảy ra trước đó 768px. Đối với các màn hình dưới 768chiều rộng màn hình pixel, thanh điều hướng sẽ giống như sau:

Có thể thay đổi @grid-float-breakpointtrong các biến.less và biên dịch lại Bootstrap. Khi làm điều này, bạn cũng sẽ phải thay đổi @screen-xs-maxtrong navbar.less. Bạn sẽ phải đặt giá trị này thành giá trị mới @grid-float-breakpoint -1. Xem thêm: https://github.com/twbs/bootstrap/pull/10465 . Điều này là cần thiết để thay đổi các biểu mẫu và menu thả xuống của thanh điều hướng tại @ grid-float-breakpoint sang phiên bản di động của chúng.

Cách dễ nhất là tùy chỉnh bootstrap

biến tìm:

 @grid-float-breakpoint

được đặt thành @screen-sm, bạn có thể thay đổi tùy theo nhu cầu của mình. Hy vọng nó giúp!

Đối với người dùng SAAS

thêm các biến tùy chỉnh của bạn như $grid-float-breakpoint: 0px;trước@import "bootstrap.scss";

Đây là một cách tiếp cận không thay đổi hành vi thu gọn mặc định trong khi vẫn cho phép một phần điều hướng mới luôn hiển thị. Nó là một sự gia tăng của navbar; navbar-header-menulà một lớp CSS tôi đã tạo và không phải là một phần của Bootstrap thích hợp.

Đặt cái này vào navbar-headerphần tử sau 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>

Thêm CSS này:

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

Kiểm tra fiddle: http://jsfiddle.net/L2txunqo/

Cảnh báo: navbar-rightcó thể được sử dụng để sắp xếp các phần tử một cách trực quan nhưng không đảm bảo kéo phần tử đến phần bên phải xa nhất của màn hình. Fiddle thể hiện hành vi đó với navbar-form.

Nếu bạn không sử dụng phiên bản ít hơn, đây là dòng bạn cần thay đổi:

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

Giải pháp sau phù hợp với tôi trong 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;
}

sau đó thêm lớp .no-sập vào từng danh sách và lớp .off vào vùng chứa chính. Đây là một ví dụ được viết bằng ngọc bích:

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

Một cách khác là chỉ cần xóa collapse navbar-collapsekhỏi đánh dấu. Ví dụ với Bootstrap 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>