เปลี่ยนจุดพักการยุบ navbar ของ bootbar โดยไม่ใช้ LESS


205

ปัจจุบันเมื่อความกว้างของเบราว์เซอร์ลดลงต่ำกว่า 768px แถบนำทางจะเปลี่ยนเป็นโหมดยุบตัว ฉันต้องการเปลี่ยนความกว้างนี้เป็น 1,000px ดังนั้นเมื่อเบราว์เซอร์ต่ำกว่า 1,000px แถบนำทางจะเปลี่ยนเป็นโหมดยุบ ฉันต้องการทำสิ่งนี้โดยไม่ใช้ LESS ฉันใช้สไตลัสไม่ใช่ LESS

ปัญหาของฉันเหมือนกับคำถามนี้: Bootstrap 3 Navbar ยุบ

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

ขอบคุณ!

คำตอบ:


50

คุณต้องเขียนข้อความค้นหาสื่อเฉพาะสำหรับคำถามนี้จากคำถามของคุณต่ำกว่า 768px แถบนำทางจะยุบดังนั้นใช้กับ 768px และต่ำกว่า 1,000px เช่นนั้น:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

การทำเช่นนี้จะซ่อน navbar ล่มจนกว่าจะเกิดค่าเริ่มต้นของ bootstrap unit เมื่อชั้นยุบพลิกเนื้อหาภายในภายในการยุบ navbar จะถูกซ่อนโดยอัตโนมัติเช่นคุณควรตั้งค่า css ตามที่คุณต้องการ


ปัจจุบัน navbar ยุบเมื่อความกว้างต่ำกว่า 768px แต่ฉันต้องการให้แถบนำทางยุบเมื่อความกว้างต่ำกว่า 1,000 พิกเซล สำหรับสิ่งนี้คุณไม่จำเป็นต้องแสดง. ยุบระหว่าง 768 ถึง 1,000 หรือไม่
Nearpoint

ใช่collapseชั้นเรียนเป็นสิ่งสำคัญสำหรับหน้าจอมือถือเพื่อที่ว่าถ้าความกว้างต่ำกว่า 768px navbar จะเป็นdisplay:noneเพื่อให้การดำเนินการที่จำเป็นจะถูกนำมาใช้ภายใน 768 1000 เครื่องหมาย ...
SaurabhLP

64
นี้ไม่ได้ทำงานใน Bootstrap 3 เพราะมีกฎอื่นที่มีnavbar-collapse.collapse display: block !importantการปิดการใช้งานนั้นจะส่งผลให้ปุ่มการยุบไม่ปรากฏขึ้น ... ดังนั้นฉันจึงเดาว่ามันเป็นคลาสที่ต้องมีการกำหนดใหม่มากไม่ใช่เฉพาะcollapse
Daniele Ricci

42
ใช่กลุ่มของ Bootstrap จะต้องถูกแทนที่ในคิวรี
Zim

1
ฮ่าฮ่าใครเป็นคนสร้าง bootstrap? ไม่คิดว่าเราจะต้องเปลี่ยนรายละเอียดเล็กน้อยนั่นหรือ
MH

400

2018 อัพเดท

Bootstrap 4

การเปลี่ยนจุดพัก navbar ง่ายขึ้นใน Bootstrap 4 โดยใช้navbar-expand-*คลาส:

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

  • navbar-expand-sm = เมนูมือถือบนหน้าจอ xs <576px
  • navbar-expand-md = เมนูมือถือบนหน้าจอ sm <768px
  • navbar-expand-lg = เมนูมือถือบนหน้าจอ md <992px
  • navbar-expand-xl = เมนูมือถือบนหน้าจอ lg <1200px
  • navbar-expand = ไม่เคยใช้เมนูมือถือ
  • (no expand class) = ใช้เมนูมือถือเสมอ

หากคุณยกเว้นnavbar-expand-*เมนูมือถือจะถูกใช้ที่allความกว้าง นี่คือตัวอย่างของสถานะ navbar ทั้ง 6 รายการ: ตัวอย่าง Navst Bootstrap 4

คุณยังสามารถใช้เบรกพอยต์แบบกำหนดเอง (??? px) โดยเพิ่ม CSS เล็กน้อย ตัวอย่างเช่นนี่คือ 1300px ..

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 จุดพัก Navbar ที่กำหนดเอง
ตัวอย่าง Bootstrap 4 Navbar Breakpoint


Bootstrap 3

สำหรับ Bootstrap 3.3.x นี่คือCSS ทำงานเพื่อแทนที่จุดพัก navbar เปลี่ยน991pxเป็นขนาดพิกเซลของจุดที่คุณต้องการให้ Navbar ยุบ ...

@media (max-width: 991px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
}

ตัวอย่างการทำงานสำหรับ 991px: http://www.bootply.com/j7XJuaE5v6
ตัวอย่างการทำงานสำหรับ 1200px: https://www.codeply.com/go/VsYaOLzfb4 (พร้อมแบบฟอร์มการค้นหา)

หมายเหตุ: ผลงานดังกล่าวข้างต้นสำหรับสิ่งที่มากกว่า 768px หากคุณต้องการที่จะเปลี่ยนมันจะน้อยกว่า 768pxตัวอย่างของน้อยกว่า 768px อยู่ที่นี่



ลองใช้ครั้งแรกนี้: [ลิงค์] ( getbootstrap.com/customize ค้นหา: 'ตัวแปรน้อยกว่า' -> 'จุดพักการสืบค้นสื่อ' เปลี่ยน: @ ค่าหน้าจอ lg-จาก 1200px เป็น 1920px ค้นหา:“ ระบบกริด” -> @ grid-float -breakpoint Change: @ screen-sm-min เป็น @ screen-lg เลื่อนไปที่ท้ายสุดของหน้าคลิกที่“ รวบรวมและดาวน์โหลด” แยกและใช้ไฟล์ที่ดาวน์โหลดเหล่านี้
rpalzona

6
โค้ดด้านบนนี้ใช้งานได้เมื่อฉันตั้งค่าที่สูงกว่า 768px แต่ฉันจำเป็นต้องทำสิ่งที่ตรงกันข้ามได้ ... ฉันต้องการให้มันยุบตัวอย่างเช่น 400px แต่เมื่อฉันตั้งค่านี้ bootstrap ดูเหมือนจะหยิบ 768 ดั้งเดิมขึ้นมา - ความคิดใด ๆ ขอบคุณ
Chris Richards

6
แม้ว่าคำตอบนี้จะทำงานได้อย่างมีเสน่ห์ แต่ก็มีเมนูแบบเลื่อนลงคุณอาจต้องปรับปรุงคำตอบ
Abhishek Pandey

2
@AbhishekPandey ฉันได้พบว่ามีประโยชน์คำตอบนี้ (ส่วนที่เกี่ยวกับการเลื่อนลง)
cbuchart

1
ขอบคุณ. ไม่เหมือนกับ "โซลูชัน" ที่มีเครื่องหมายถูกติดกับรหัสของคุณใช้งานได้จริง
Michael S. Miller

46

ในbootstrap3เปลี่ยนตัวแปรนี้@ grid-float-เบรกพอยต์เป็นสิ่งที่คุณต้องการ ค่าเริ่มต้นคือ 768px


17
กรุณาโพสต์ตัวอย่างได้ไหม
e.thompsy

2
โปรดทราบว่าหากคุณใช้ sass และคุณไม่ต้องการแทนที่รหัสผู้ขาย (คุณไม่ควรทำ) คุณจะต้องรวมไฟล์ที่มีตัวแปรด้วยค่าที่กำหนดเองของคุณก่อนที่ไฟล์ bootstrap sass เหตุผลก็คือตัวแปรทั้งหมดของ Bootstrap ถูกตั้งค่าเป็นค่าเริ่มต้น! ค่าดังนั้นเราจำเป็นต้องแทนที่ค่าเหล่านี้โดยการนำเข้าตัวแปรของเราก่อน
Makis K.

โปรดเพิ่มตัวอย่างของวิธีการทำเช่นนี้ ... ฉันยังใหม่กับ bootstrap และ grep เผย 0 อินสแตนซ์ของตัวแปรนี้ในโครงการของฉัน
Matt Clark

1
@MattClark @grid-float-breakpointถูกกำหนดไว้ในคอมไพเลอร์: getbootstrap.com/customize - ค่าเริ่มต้นเป็นแต่คุณสามารถเปลี่ยนมัน@screen-sm-min 1234px
rybo111

24

ทำงานในที่สุดวิธีที่จะเปลี่ยนความกว้างล่มสลายโดยการเล่นซอกับ '@ ตารางลอยเบรกพอยต์' ที่http://getbootstrap.com/customize/

ไปที่บรรทัด 2923 ใน bootstrap.css (เช่นเวอร์ชันขั้นต่ำ) และเปลี่ยน@media screen and (min-width: 768px) {เป็น@media screen and (min-width: 1000px) {

ดังนั้นรหัสจะเป็น:

@media screen and (min-width: 1000px) {
  .navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
  }
  .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none;
  }
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

โปรดทราบว่าหมายเลขบรรทัดที่คุณเสนอจะแตกต่างกันหากคุณใช้ Customizer: getbootstrap.com/customize
henrywright

1
เพิ่งเปลี่ยนการทำงาน@grid-float-breakpointของฉันresponsive.lessให้ฉัน!
cvng

6
คุณควรแทนที่ไฟล์ CSS อื่นแทนการเปลี่ยนไฟล์ bootstrap css โดยตรง
Ivanka Todorova

1
การเข้าชมครั้งแรก: [ลิงก์] ( getbootstrap.com/customize ค้นหา: 'ตัวแปรที่น้อยลง' -> 'จุดพักการสืบค้นสื่อ' การเปลี่ยนแปลง: @ ค่าหน้าจอ lg-จาก 1200px ถึง 1920px ค้นหา: "ระบบกริด" -> @ กริด - ลอย - เบรกพอยต์ เปลี่ยน: @ screen-sm-min เป็น @ screen-lg เลื่อนไปที่ท้ายหน้าคลิกที่“ รวบรวมและดาวน์โหลด” แยกและใช้ไฟล์ที่ดาวน์โหลดเหล่านี้
rpalzona

13

ฉันเพิ่งทำสิ่งนี้ได้สำเร็จโดยใช้โค้ด CSS ต่อไปนี้

@media(max-width:1000px)  {

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

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

    .collapse.in {
      display: block !important;
    }

}

2
จะไม่แสดงปุ่มเมนูที่ยุบเมื่อความกว้างอยู่ระหว่าง 768px ถึง 1,000px
ช่างฝีมือ

4
@craftsman: สำหรับปุ่มใช้สิ่งนี้: .navbar-toggle {display: block! important; } .navbar-header {width: 100%; ความสูง: 60px; }
Aniket Suryavanshi

3
ยังคงไม่แสดงเนื้อหาภายในเมนูแฮมเบอร์เกอร์
behzad

13

ใน Bootstrap 3 .LESS ซอร์สโค้ดมีตัวแปรที่กำหนดไว้ในvariables.lessเรียก@grid-float-breakpointซึ่งมีความคิดเห็นที่เป็นประโยชน์ต่อไปนี้

//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;

@grid-float-breakpoint-maxค่าการจับคู่ถูกตั้งค่าเป็นลบ 1px:

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

สารละลาย:

ดังนั้นเพียงแค่ตั้ง@grid-float-breakpointค่าเป็น 1000px แทนและสร้างใหม่bootstrap.lessในbootstrap.css:

เช่น

@grid-float-breakpoint: 1000px;

จะสร้างใหม่ได้อย่างไร? ฉันลองบรรทัดคำสั่งนี้$ lessc bootstrap.less bootstrap.cssแต่ไม่มีอะไรเกิดขึ้น
AnthonyR

@AnthonyRn: ฉันไม่รู้ว่าการตั้งค่าโครงการของคุณคืออะไร ฉันเพิ่งอัปเดตแหล่ง Bootstrap LESS ในโปรเจ็กต์ VS 2013 ของฉันและสร้างขึ้นใหม่เมื่อบันทึก บางทีคุณควรถามคำถามใหม่
Gone Coding

ปัญหาของฉันได้รับการแก้ไขโดยใช้เครื่องมือตัวปรับแต่งออนไลน์ของ Bootstrap ที่นี่getbootstrap.com/customize ขอบคุณสำหรับการแก้ปัญหา!
AnthonyR

1
ฉันคิดว่านี่ควรเป็นคำตอบที่ยอมรับเพราะใช้วิธีการของตัวเอง Bootstraps สำหรับการกำหนดเบรกพอยต์ ตัวอย่างเช่นฉันสามารถ 'สร้างใหม่' bootstrap ได้ง่ายและมีผลลัพธ์ที่ต้องการโดยการตั้งค่าตัวแปรนี้เป็นสิ่งที่ฉันต้องการให้เป็นเบรกพอยต์
Serge Melis

@AnthonyR ในการสร้างใหม่คุณใช้คำสั่ง grunt grunt distซึ่งจะสร้างไดเรกทอรี dist อีกครั้ง คุณจะเรียกใช้คำสั่งนั้นจากไดเรกทอรีที่คุณมี gruntfile.js การอ้างอิง: getbootstrap.com/getting-started/#grunt
Radmation

11

วิธี Sass ในการเปลี่ยนตัวแปร bootstrap นั้นมีการทำเอกสารไว้ในหน้าbootstrap-sass github

เพียงกำหนดตัวแปรใหม่ก่อนที่คุณจะนำเข้า bootstrap @:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

7

นอกเหนือจาก @Skely answer แล้วหากต้องการสร้างเมนูแบบเลื่อนลงภายในแถบนำทางให้ใช้งานได้ให้เพิ่มคลาสของพวกเขาเพื่อลบล้าง รหัสสุดท้าย:

    @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .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;*/
            margin: 7.5px 50px 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;
        }
    }

รหัสตัวอย่าง


4

ใน bootstrap v4 การนำทางสามารถยุบได้ไม่ช้าก็เร็วโดยใช้คลาส css ที่แตกต่างกัน

เช่น:

  • navbar-toggleable-SM
  • navbar-toggleable-md
  • navbar-toggleable-LG

ด้วยปุ่มสำหรับการนำทาง:

  • ซ่อน sm-ขึ้น
  • ซ่อน-MD-ขึ้น
  • ซ่อน LG-ขึ้น

ในอัลฟาปัจจุบันดูเหมือนว่าจะไปnavbar-toggleable-smสำหรับฉันเท่านั้นxsทำให้มันไม่เคยสลับ ฉันอาจจะทำสิ่งที่ผิด ขอบคุณ!
nerdwaller

@nerdwaller ดูเหมือนว่าคุณถูกต้องทำการแก้ไขจาก xs เป็น sm
whitneyland

3

สำหรับ Bootstrap 3.3 นี่เป็นรหัสเดียวที่คุณต้องการ:

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}

ทำงานไม่สมบูรณ์ รายการเมนูที่แสดงไม่ใช่แนวตั้ง แต่เป็นแนวนอน
Volomike

3

สิ่งนี้ใช้ได้สำหรับฉัน Bootstrap3

@media (min-width: 768px) {
    .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;
      }
}

ใช้เวลาสักครู่เพื่อคิดสองสิ่งนี้:

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

สิ่งนี้ใช้ได้สำหรับฉัน ข้อยกเว้นเพียงอย่างเดียวคือความกว้างพิกเซลขั้นต่ำควรเป็น 1,000px ในตัวอย่างของคุณด้านบน
Sascha

2

ทางออกที่ดีที่สุดของคุณคือใช้พอร์ตของตัวประมวลผล CSS ที่คุณใช้

ฉันเป็นแฟนตัวยงของ SASS ดังนั้นตอนนี้ฉันจึงใช้https://github.com/thomas-mcdonald/bootstrap-sass

ดูเหมือนว่า Stylus จะมีทางเลือกดังนี้: https://github.com/Acquisio/bootstrap-stylus

มิฉะนั้นการค้นหาและแทนที่เป็นเพื่อนที่ดีที่สุดของคุณในเวอร์ชัน css ...


ดังนั้นสำหรับตัวเลือกการค้นหาและแทนที่นั่นหมายความว่าแก้ไขการสอบถามสื่อ bootstrap.css โดยตรงหรือไม่ ฉันสามารถเปลี่ยนคิวรีสื่อที่ใช้กับ navbar ได้หรือไม่ ฉันถูกบอกว่ามันไม่ควรแก้ไขไฟล์ bootstrap ซอร์ส แต่ฉันไม่รู้ว่าทำไมคุณคิดอย่างไร
Nearpoint

1

สวัสดีฉันคิดว่าคุณสามารถทำได้โดยใช้ CSS เช่นนี้คุณสามารถเปลี่ยนเมนู bootstrap เบรกพอยต์

    @media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important; 
    }
    .navbar-nav>li {
        float: none;
    } 
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}

1

Navbars สามารถใช้ชั้นเรียน. navbar-toggler, .navbar-ยุบและ. navbar-expand {-sm | -md | -lg | -xl} คลาสเพื่อเปลี่ยนเมื่อเนื้อหาของพวกเขายุบลงหลังปุ่ม เมื่อใช้ร่วมกับโปรแกรมอรรถประโยชน์อื่น ๆ คุณสามารถเลือกได้ว่าจะแสดงหรือซ่อนองค์ประกอบเฉพาะเมื่อใด

สำหรับแถบนำทางที่ไม่ยุบให้เพิ่มคลาส. nav แถบขยายบนแถบนำทาง สำหรับแถบนำทางที่ยุบเสมออย่าเพิ่มคลาสใด ๆ . nav แถบขยาย

ตัวอย่างเช่น :

<nav class="navbar navbar-expand-lg"></nav>

เมนูมือถือแสดงขึ้นในหน้าจอขนาดใหญ่

การอ้างอิง: https://getbootstrap.com/docs/4.0/components/navbar/


ใช่อันนี้เหมาะกับฉันตามที่ฉันต้องการ แน่นอนถ้าคุณต้องการที่เฉพาะเจาะจงมากขึ้นเบรกพอยต์แล้วกำหนดค่าแบบสอบถามสื่อของคุณเองจะมีความจำเป็น (เพราะฉะนั้นคำตอบที่ดีสำหรับคำถามนี้)
Coderhi

0

นี่คือสิ่งที่หลอกลวงสำหรับฉัน:

@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}

ด้วยวิธีการแก้ปัญหาของคุณและ Veek ฉันพบว่าระหว่าง 768 และ 1,000 ระยะขอบขยายตัวไม่ถูกต้อง พวกมันใช้ได้ดีเกินขีด จำกัด เหล่านั้น ด้วยวิธีการแก้ปัญหาของคุณไอคอนสำหรับเมนูที่ยุบตัวจะไม่อยู่ทางด้านขวาหลังจากยุบ แต่กดขึ้นกับ "แบรนด์"
Mike O'Connor

ดังนั้นขอโทษฉันเห็นได้ชัดว่าโง่ ฉันยังคงมีปัญหาของระยะขอบที่ไม่เหมาะสมปรากฏอยู่ภายในขีด จำกัด เหล่านั้น อย่างไรก็ตามฉันเห็นแล้วว่าตัวอย่างบูตสแตปป์ออนไลน์อย่างเป็นทางการแสดงปัญหาระยะขอบเดียวกันโดยกำเนิด
Mike O'Connor

0

ใน bootstrap 4 ถ้าคุณต้องการข้ามเมื่อ navbar-expand- * ขยายและยุบและแสดงและซ่อนแฮมเบอร์เกอร์ (navbar-toggler) คุณต้องค้นหาสไตล์ / คำจำกัดความดังกล่าวใน bootstrap.css และกำหนดใหม่ใน customstyle.css ของตัวเอง (หรือโดยตรงใน bootstrap.css หากคุณมีแนวโน้มมาก)

เช่น. ฉันต้องการให้ navbar-expand-lg ยุบและแสดง navbar-toggler ที่ 950px ใน bootstrap.css ฉันพบ:

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

และด้านล่างนั้น ...

@media (min-width:992px) { 
    ... lots of styling ...
}

ฉันคัดลอกทั้งแบบสอบถาม @ สื่อและติดไว้ใน style.css ของฉันจากนั้นปรับขนาดให้พอดีกับความต้องการของฉัน ฉันกรณีของฉันฉันต้องการให้ยุบที่ 950px ข้อความค้นหา @media ต้องมีขนาดแตกต่างกัน (ฉันคาดเดา) ดังนั้นฉันจึงตั้งค่าความกว้างสูงสุดของคอนเทนเนอร์เป็น 949.98px และใช้ 950px สำหรับข้อความค้นหา @media อื่น ๆ ดังนั้นรหัสต่อไปนี้จึงถูกผนวกเข้ากับ style.css ของฉัน นี่ไม่ใช่เรื่องง่ายที่จะแยกตัวออกจากการแก้ปัญหาบิดที่ฉันพบใน Stackoverflow และที่อื่น ๆ หวังว่านี่จะช่วยได้

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}

0

นี่คือรหัสการทำงานของฉันที่ใช้ในการตอบโต้ด้วย Bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<style>
  @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
  </style>

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.