Bootstrap 3 Navbar ยุบ

มีวิธีใดที่จะเพิ่มจุดที่ bootstrap navbar 3 ยุบ (เช่นเพื่อให้มันยุบลงในแบบหล่นลงบนแท็บเล็ตแนวตั้ง)?

สองสิ่งนี้ใช้ได้กับ bootstrap 2 แต่ไม่ใช่ตอนนี้!

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

เปลี่ยนจุดพักการตอบสนอง navbar ดีฟอลต์

ฉันมีปัญหาเดียวกันวันนี้

Bootstrap 4

มันเป็นฟังก์ชั่นพื้นฐาน: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

คุณต้องใช้.navbar-expand{-sm|-md|-lg|-xl}คลาส:

<nav class="navbar navbar-expand-md navbar-light bg-light">

Bootstrap 3

@media (max-width: 991px) {
    .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-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

เปลี่ยนเพียง991pxโดย1199pxสำหรับmdขนาด

การสาธิต

ความแตกต่างอย่างมากระหว่าง Bootstrap 2 และ Bootstrap 3 ก็คือ Bootstrap 3 นั้นเป็น "mobile first"

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

เว็บไซต์ของ Bootstrap 3 มี "คำแนะนำ" จริง ๆ แล้วว่าต้องทำอะไร: http://getbootstrap.com/components/#navbar

ปรับแต่งจุดยุบ

ขึ้นอยู่กับเนื้อหาในแถบนำทางของคุณคุณอาจต้องเปลี่ยนจุดที่แถบนำทางของคุณสลับระหว่างโหมดยุบและแนวนอน กำหนดตัวแปร @ grid-float-เบรกพอยต์หรือเพิ่มเคียวรีสื่อบันทึกของคุณเอง

หากคุณกำลังจะรวบรวม LESS ของคุณอีกครั้งคุณจะพบตัวแปร LESS ที่บันทึกไว้ในvariables.lessไฟล์ ปัจจุบันได้ตั้งค่าเป็น "ขยาย" @media (min-width: 768px)ซึ่งเป็น "หน้าจอขนาดเล็ก" (เช่นแท็บเล็ต) โดยข้อกำหนด Bootstrap 3

@grid-float-breakpoint: @screen-tablet;

หากคุณต้องการให้ยุบอีกต่อไปอีกเล็กน้อยคุณสามารถปรับได้ดังนี้:

@grid-float-breakpoint: @screen-desktop; (992px จุดพัก)

หรือขยายเร็วกว่า

@grid-float-breakpoint: @screen-phone (จุดพัก 480px)

หากคุณต้องการให้มันขยายในภายหลังและไม่จัดการกับการรวบรวม LESS อีกครั้งคุณจะต้องเขียนทับสไตล์ที่นำไปใช้ที่768pxเคียวรีสื่อบันทึกและให้กลับไปเป็นค่าก่อนหน้า จากนั้นเพิ่มอีกครั้งในเวลาที่เหมาะสม

ฉันไม่แน่ใจว่ามีวิธีที่ดีกว่าที่จะทำ การคอมไพล์ Bootstrap น้อยกว่าความต้องการของคุณเป็นวิธีที่ดีที่สุด (ง่ายที่สุด) มิฉะนั้นคุณจะต้องค้นหาข้อความค้นหาสื่อ CSS ทั้งหมดที่มีผลต่อ Navbar ของคุณเขียนทับคำเหล่านั้นเป็นรูปแบบเริ่มต้นที่ความกว้าง 768px แล้วเปลี่ยนกลับเป็นความกว้างขั้นต่ำที่สูงขึ้น

การคอมไพล์ใหม่ LESS จะทำทุกอย่างที่วิเศษสำหรับคุณเพียงแค่เปลี่ยนตัวแปร ซึ่งเป็นจุดสำคัญของคอมไพเลอร์ก่อน LESS / SASS =)

(โปรดสังเกตว่าฉันดูพวกมันหมดแล้วมันเป็นโค้ดประมาณ 100 บรรทัดซึ่งน่ารำคาญพอที่ฉันจะวางความคิดและรวบรวม Bootstrap ใหม่สำหรับโครงการที่กำหนดและหลีกเลี่ยงการทำให้บางสิ่งเกิดขึ้นโดยบังเอิญ)

ฉันหวังว่าจะช่วย!

ไชโย!

วิธีที่ง่ายที่สุดคือปรับแต่ง bootstrap

ค้นหาตัวแปร:

 @grid-float-breakpoint

ซึ่งถูกตั้งค่าเป็น @ screen-sm คุณสามารถเปลี่ยนได้ตามความต้องการของคุณ หวังว่ามันจะช่วย!

สิ่งเหล่านี้ถูกควบคุมในตัวแปรไม่จำเป็นต้องโคลนรอบ ๆ ในแหล่งที่มา ด้วย bootstrap ลองใช้ตัวแปรก่อนแล้วจึงแทนที่ จากนั้นย้อนกลับไปลองตัวแปรอีกครั้ง;)

ฉันใช้ bootstrap-sass กับราง แต่ก็เหมือนกันกับ LESS เริ่มต้น

FILE: main.css.scss
-------------------

// control the screen sizes
$screen-xs-min: 300px;
$screen-sm-min: 400px;
$screen-md-min: 800px;
$screen-lg-min: 1200px;

// this tells which screen size to use to start breaking on
// will tell navbar when to collapse
$grid-float-breakpoint: $screen-md-min;

// then import your bootstrap
@import "bootstrap";

แค่นั้นแหละ! หน้าอ้างอิงตัวแปรนี้มีประโยชน์มาก: https://github.com/twbs/bootstrap/blob/master/less/variables.less

ขอบคุณ Seb33300 ฉันได้งานนี้ อย่างไรก็ตามดูเหมือนว่าส่วนสำคัญจะหายไป อย่างน้อยใน Bootstrap เวอร์ชั่น 3.1.1

ปัญหาของฉันคือ Navbar ยุบลงตามความกว้างที่ถูกต้อง แต่ปุ่มเมนูไม่ทำงาน ฉันไม่สามารถขยายและยุบเมนูได้

นี่เป็นเพราะคลาสยุบในนั้นถูกแทนที่ด้วย! สำคัญใน. navbar-ยุบ.collapseและสามารถแก้ไขได้ด้วยการเพิ่ม "coll.in" ตัวอย่างของ Seb33300 เสร็จสมบูรณ์ด้านล่าง:

@media (max-width: 991px) {
    .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;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

ฉันต้องการที่จะ upvote และแสดงความคิดเห็นในคำตอบของ jmbertucci แต่ฉันยังไม่ได้รับความเชื่อถือด้วยการควบคุม ฉันมีปัญหาเดียวกันและแก้ไขมันตามที่เขาพูด หากคุณใช้ Bootstrap 3.0 ให้แก้ไขตัวแปร LESS ใน variables.less จุดพักการตอบสนองจะถูกตั้งไว้ที่บรรทัดที่ 200:

@screen-xs:                  480px;
@screen-phone:               @screen-xs;

// Small screen / tablet
@screen-sm:                  768px;
@screen-tablet:              @screen-sm;

// Medium screen / desktop
@screen-md:                  992px;
@screen-desktop:             @screen-md;

// Large screen / wide desktop
@screen-lg:                  1200px;
@screen-lg-desktop:          @screen-lg;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

จากนั้นตั้งค่าการล่มสลายสำหรับ navbar โดยใช้@ ตารางลอยเบรกพอยต์ตัวแปรที่เกี่ยวกับสาย 232 โดยค่าเริ่มต้นมีการตั้งค่า @ หน้าจอแท็บเล็ต หากคุณต้องการคุณสามารถใช้ค่าพิกเซล แต่ฉันชอบที่จะใช้ตัวแปรน้อย

หากปัญหาที่คุณเผชิญคือเมนูที่แบ่งเป็นหลายบรรทัดคุณสามารถลองทำอย่างใดอย่างหนึ่งต่อไปนี้:

1) พยายามลดจำนวนรายการเมนูหรือความยาวเช่นลบรายการเมนูหรือตัดคำให้สั้นลง

2) การลดช่องว่างระหว่างไอเท็มเมนูเช่นนี้:

.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}

ช่องว่างภายในเริ่มต้นคือ 15px ทั้งสองด้าน (ซ้ายและขวา)

หากคุณต้องการเปลี่ยนการใช้งานแต่ละด้าน:

padding-left: 7px; 
padding-right: 8px;

การตั้งค่านี้มีผลต่อรายการแบบหล่นลงด้วย

สิ่งนี้ไม่ตอบคำถาม แต่สามารถช่วยคนอื่นที่ไม่ต้องการยุ่งกับ CSS หรือใช้ตัวแปร LESS วิธีการทั่วไปสองวิธีในการแก้ปัญหานี้

แถบจะยุบบนอุปกรณ์ขนาดเล็ก จุดยุบถูกกำหนดโดย @ grid-float-breakpoint ในตัวแปร โดยค่าเริ่มต้นสิ่งนี้จะทำได้ก่อน 768px สำหรับหน้าจอด้านล่างความกว้างหน้าจอ 768 พิกเซลแถบนำทางจะมีลักษณะดังนี้:

เป็นไปได้ที่จะเปลี่ยน @ grid-float-เบรกพอยต์ใน variables.less และคอมไพล์ Bootstrap ใหม่ เมื่อทำสิ่งนี้คุณจะต้องเปลี่ยน @ screen-xs-max ใน navbar.less คุณจะต้องตั้งค่านี้เป็น @ grid-float-breakpoint -1 ใหม่ของคุณ ดูเพิ่มเติม: https://github.com/twbs/bootstrap/pull/10465 สิ่งนี้จำเป็นสำหรับการเปลี่ยนรูปแบบ navbar และดรอปดาวน์ที่ @ grid-float-เบรกพอยต์เป็นเวอร์ชันมือถือ

ฉันกังวลเกี่ยวกับการบำรุงรักษาและอัปเกรดปัญหาตามถนนจากการกำหนด Bootstrap เอง ฉันสามารถจัดทำเอกสารขั้นตอนการปรับแต่งได้ในวันนี้และหวังว่าบุคคลที่อัปเกรด Bootstrap สามปีนับจากนี้จะพบเอกสารและนำขั้นตอนไปใช้ใหม่ (อาจทำงานได้หรือไม่ทำงาน ณ จุดนั้น) ฉันสามารถโต้แย้งได้ทั้งสองวิธี แต่ฉันต้องการเก็บการปรับแต่งใด ๆ ไว้ในรหัสของฉัน

ฉันไม่เข้าใจวิธีการทำงานของ Seb33300 มากนัก แน่นอนมันไม่ได้ทำงานกับ Bootstrap 4.0.3 เพื่อให้แถบนำทางขยายที่ 1200 แทนที่จะเป็น 768 กฎสำหรับการสืบค้นสื่อทั้งสองจะต้องถูกแทนที่เพื่อป้องกันการขยายที่ 768 และบังคับให้ขยายที่ 1200

ฉันมีเมนูอีกต่อไปที่จะปิดบน iPad ในโหมดแนวตั้ง รายการต่อไปนี้ทำให้เมนูถูกยุบจนกว่าจะถึงจุดเบรก 1200:

@media (min-width: 768px) {
    .navbar-header {
        float: none; }
    .navbar-toggle {
        display: block; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px; }
    .navbar-collapse.collapse {
        display: none !important; }
        .navbar-collapse.collapse.in { 
        display: block!important; 
        margin-top: 0px; }
}
@media (min-width: 1200px) {
    .navbar-header {
        float: left; }
    .navbar-toggle {
    display: none; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        display: block !important; }
}

ฉันใช้ CSS ในการติดตั้ง Bootstrap 3.0.0 เนื่องจากฉันไม่คุ้นเคยกับ LESS นี่คือรหัสที่ผมเพิ่มไปยังไฟล์ CSS กำหนดเองของฉัน (ซึ่งผมโหลดหลังจาก bootstrap.css) accordionซึ่งได้รับอนุญาตให้ฉันไปควบคุมเพื่อให้เมนูก็มักจะทำงานเหมือน
หมายเหตุ:ฉันรวมส่วนทั้งหมดnavbarไว้ใน div กับชั้นเรียนsidebarเพื่อแยกพฤติกรรมที่ฉันต้องการดังนั้นจึงไม่มีผลต่อ navbars อื่น ๆ ในเว็บไซต์ของฉันเช่นเมนูหลัก ปรับตามความต้องการของคุณหวังว่ามันจะช่วยได้

/* Sidebar Menu Fix */

.sidebar .navbar-nav {
  margin: 7.5px -15px;
}
.sidebar .navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.sidebar .navbar-collapse {
  max-height: 500px;
}
.sidebar .navbar-nav .open .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
.sidebar .dropdown-menu > li > a {
  color: #777777;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #333333;
  background-color: transparent;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #555555;
  background-color: #e7e7e7;
}
.sidebar .navbar-nav {
  float: none;
}
.sidebar .navbar-nav > li {
  float: none;
}

หมายเหตุเพิ่มเติม: ฉันยังเพิ่มการเปลี่ยนแปลงในการสลับของเมนูหลักnavbar(เนื่องจากรหัสด้านบนในเว็บไซต์ของฉันใช้สำหรับ "เมนูย่อย" ที่ด้านข้าง

ฉันเปลี่ยน:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

เป็น:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-topmenu">

แล้วก็ปรับ:

<div class="navbar-collapse collapse navbar-collapse">

เป็น:

<div class="navbar-collapse collapse navbar-collapse-topmenu">

หากคุณจะมีเพียงnavbarฉันเดาคุณจะไม่ต้องกังวลเกี่ยวกับเรื่องนี้ แต่มันช่วยฉันในกรณีของฉัน

และสำหรับผู้ที่ต้องการยุบที่ความกว้างน้อยกว่า 768px มาตรฐาน (ขยายที่ความกว้างน้อยกว่า 768px) นี่คือ css ที่ต้องการ:

@media (min-width: 600px) {
.navbar-header {
        float: left;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0 none;
    box-shadow: none;
    width: auto;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left !important;
    margin: 0;
}
.navbar-nav>li {
    float: left;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
}

ฉันคิดว่าฉันพบวิธีง่ายๆในการเปลี่ยนจุดหยุดการยุบเท่านั้นผ่าน css

ฉันหวังว่าคนอื่นสามารถยืนยันได้เนื่องจากฉันไม่ได้ทดสอบอย่างละเอียดและฉันไม่แน่ใจว่ามีผลข้างเคียงกับวิธีแก้ปัญหานี้หรือไม่

คุณต้องเปลี่ยนค่าการสืบค้นสื่อสำหรับคำจำกัดความของคลาสต่อไปนี้:

@media (min-width: BREAKPOINT px ){
    .navbar-toggle{display:none}
}

@media (min-width: BREAKPOINT px){
    .navbar-collapse{
        width:auto;
        border-top:0;box-shadow:none
    }
    .navbar-collapse.collapse{
        display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important
    }
    .navbar-collapse.in{
        overflow-y:visible
   }
   .navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{
        padding-left:0;padding-right:0
    }
}

นี่คือสิ่งที่ทำงานให้ฉันในโครงการปัจจุบันของฉัน แต่ฉันยังคงต้องเปลี่ยนคำนิยาม css บางอย่างเพื่อจัดเรียงเมนูอย่างถูกต้องสำหรับทุกขนาดหน้าจอ

หวังว่านี่จะช่วยได้