จะเปลี่ยนขีด จำกัด การยุบ navbar โดยใช้ Twitter bootstrap-responsive ได้อย่างไร

ฉันใช้ Twitter Bootstrap 2.0.1 ในโปรเจ็กต์ Rails 3.1.2 ที่ใช้กับ bootstrap-sass ฉันกำลังโหลดทั้งไฟล์bootstrap.cssและbootstrap-responsive.cssไฟล์รวมถึงbootstrap-collapse.jsJavascript

ผมมีรูปแบบของเหลวกับ navbar ที่คล้ายกับตัวอย่าง นี้ต่อไปนี้ navbar ว่า "รูปแบบการตอบสนอง" คำแนะนำที่นี่ ใช้งานได้ดี: หากหน้าเว็บแคบกว่าประมาณ 940px แถบนำทางจะยุบลงและแสดง "ปุ่ม" ที่ฉันสามารถคลิกเพื่อขยายได้

อย่างไรก็ตามแถบนำทางของฉันดูดีถึงความกว้างประมาณ 550px กล่าวคือไม่จำเป็นต้องยุบเว้นแต่หน้าจอจะแคบมาก

ฉันจะบอกให้ Bootstrap ยุบเฉพาะแถบนำทางได้อย่างไรหากหน้าจอกว้างน้อยกว่า 550px

โปรดทราบว่า ณ จุดนี้ฉันไม่ต้องการปรับเปลี่ยนพฤติกรรมตอบสนองอื่น ๆ เช่นการวางองค์ประกอบแบบซ้อนกันแทนที่จะแสดงแบบเคียงข้างกัน

คุณกำลังค้นหาบรรทัด 239 ของ bootstrap-responsive.css

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

โดยที่max-widthค่าจะทริกเกอร์การนำทางที่ตอบสนอง เปลี่ยนเป็น 550px หรือมากกว่านั้นและควรปรับขนาดได้ดี

Bootstrap> 2.1 && <3

• ใช้ bootstrap เวอร์ชันที่น้อยกว่า
• เปลี่ยนตัวแปร @navbarCollapseWidth ใน parameters.less
• คอมไพล์

อัปเดต 2013: วิธีง่ายๆ

• ไปที่http://getbootstrap.com/customize/#less-variables
• เปลี่ยน @navbarCollapseWidth ใน formfield
• คลิก "รวบรวมและดาวน์โหลด"

(THX ถึง Archonic ผ่านความคิดเห็น)

อัปเดต 2014: Bootstrap 3.1.1 และ 3.2 (พวกเขายังเพิ่มลงในเอกสารประกอบ )

หากคุณกำลังปรับแต่งหรือลบล้าง / แก้ไข.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คำค้นหาใหม่เพื่อวางองค์ประกอบ navbar ลงได้ตามที่เห็นสมควรสิ่งที่คุณต้องทำคือรีเซ็ตคำค้นหาเดิมเพื่อให้เหมาะกับข้อความค้นหาใหม่ของคุณด้วยความกว้างที่ต้องการ ยกตัวอย่างเช่น:

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ได้อย่างไร ฉันแก้ไขแบบสอบถามต้นฉบับโดยตรงจาก bootstrap-responsive css เพื่อรีเซ็ตรูปแบบทั้งหมดที่ใช้กับแบบสอบถามเฉพาะนั้นสำหรับองค์ประกอบ navbar และย้ายไปยังแบบสอบถามใหม่ที่มีจุดดร็อปที่คุณต้องการแทน ด้วยวิธีนี้เราสามารถเปลี่ยนสไตล์ทั้งหมดจากแบบสอบถามเดิมไปยังแบบสอบถามใหม่โดยไม่ต้องยุ่งกับสไตล์ชีทที่ตอบสนองต่อบูตสแตรปด้วยวิธีนี้ค่าเริ่มต้นจะยังคงใช้กับองค์ประกอบอื่น ๆ ในเอกสารของคุณ

นี่คือตัวอย่างสั้น ๆ ที่มีการตั้งค่าการสืบค้นสื่อ550pxตามที่คุณต้องการ: http://jsfiddle.net/wU8MW/

หมายเหตุ: ฉันวางคิวรีที่แก้ไขด้านบนไว้@mediaด้านล่างเฟรม css เนื่องจาก css ที่แก้ไขใหม่ควรจะโหลดก่อนแทนที่จะเป็น css ที่ตอบสนอง

bootstrap-sass จะรองรับตัวแปร $ navbarCollapseWidth ในเวอร์ชันถัดไป (2.2.1.0) คุณจะสามารถอัปเดตเพื่อทำสิ่งที่คุณต้องการเมื่อเวอร์ชันนั้นเผยแพร่!

ในเดือนสิงหาคม 2013 สามารถดูหน้า "ปรับแต่งและดาวน์โหลด" Bootstrap 3 ได้ที่http://getbootstrap.com/customize/

ด้วย Bootstrap 3 ตัวแปรที่เกี่ยวข้องคือ @ grid-float-breakpoint

หน้า Stack Overflow ต่อไปนี้มีรายละเอียดเพิ่มเติม: 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 แยกต่างหากซึ่งแสดงรายการบางส่วนทั้งหมดที่ bootstrap ต้องการด้วยวิธีนี้ฉันสามารถเปิดและปิดบางส่วนได้ขึ้นอยู่กับสิ่งที่ไซต์ของเราต้องการ ด้วยวิธีนี้ฉันสามารถลบล้างตัวแปรเบรกพอยต์ได้อย่างง่ายดาย นี่คือสิ่งที่ฉันได้รับ:

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

นี่คือรหัสของฉัน (โซลูชันอื่น ๆ ทั้งหมดแสดงแถบเลื่อนที่ขี้ขลาดเมื่อแถบนำทางเลื่อนลงดังนั้นฉันจึงแก้ไขรหัสเพื่อไม่ให้) ฉันไม่สามารถโพสต์คำตอบอื่นได้ดังนั้นฉันจะทำที่นี่เพื่อให้คนอื่นพบ ฉันใช้รางเพื่อทำสิ่งนี้กับ Bootstrap 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;
}

Bootstrap 3.x

เมื่อใช้LESSคุณสามารถเปลี่ยนค่า@screen-smallเพื่อกำหนดเป้าหมายขนาดขั้นต่ำของคุณได้

ตัวอย่าง: @screen-small: 600px;

ฉันใช้สิ่งนี้เพื่อเปลี่ยนเป็นโหมด "อุปกรณ์จิ๋ว" เมื่อความกว้างน้อยกว่า 600px เท่านั้น

Bootstrap 3.x

เมื่อใช้ SASS คุณสามารถเปลี่ยนค่า $ screen-sm เพื่อกำหนดเป้าหมายขนาดขั้นต่ำของคุณได้

ตัวอย่าง: $ screen-sm: 600px;

คุณต้องใส่ค่านี้ในไฟล์ application.scss ของคุณก่อน @import "bootstrap";

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

ตัวแปรน้อยกว่าที่ขึ้นต้นด้วย "@" เพียงแค่เปลี่ยนเป็น "$" เพื่อลบล้างก่อนการนำเข้า

นี่คือรายการตัวแปร

Bootstrap 4.x

มันเป็นเรื่องง่ายที่จะเปลี่ยนขีด จำกัด การยุบใน Bootstrap 4.x. มี 6 กรณี:

1. ขยายเสมอไม่ยุบ (เช่นเบรกพอยต์คือ 0px): <nav class="navbar navbar-expand">...</nav>
2. เบรกพอยต์คือsm (576px):<nav class="navbar navbar-expand-sm">...</nav>
3. เบรกพอยต์คือmd (768px):<nav class="navbar navbar-expand-md">...</nav>
4. เบรกพอยต์คือlg (992px):<nav class="navbar navbar-expand-lg">...</nav>
5. เบรกพอยต์คือxl (1200px):<nav class="navbar navbar-expand-xl">.../nav>
6. ยุบเสมอไม่ขยาย (เช่นเบรกพอยต์คือ∞px) : <nav class="navbar">...</nav>(เพียงเอาnavbar-expand-*ระดับมือถือครั้งแรกในขณะที่เงินทุน 4.x.)

เครดิตสำหรับบทความนี้โดย Carol Skelly ฉันพบhttps://medium.com/wdstack/examples-bootstrap-4-navbar-b3c9dc0edc1a

นี่เป็นตัวอย่างที่ดีว่าคุณสามารถใช้ไฟล์ 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)

แน่นอน ... คุณจะต้องรวบรวมน้อยใช้หนึ่งในวิธีการที่แนะนำ

การแฮ็คของไทเลอร์ให้ดียิ่งขึ้นไปอีกด้วยการเพิ่มบล็อกคลาสโทรศัพท์ที่มองเห็นได้และคลาสโทรศัพท์ที่ซ่อนอยู่ให้กับรายการในการนำทางหลักที่ยุบได้คุณสามารถ "ดึง" รายการที่ยุบออกมาหนึ่งหรือสองรายการเพื่อแสดงแม้ในแถบนำทางของโทรศัพท์

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

เพียงจดรหัสนี้ลงในไฟล์ style.css ที่คุณกำหนดเองก็จะใช้งานได้

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