ฉันใช้ bootstrap บนเว็บไซต์ของฉันและฉันมีปัญหากับ navbar คงที่ เมื่อฉันใช้ navbar ปกติทุกอย่างใช้ได้ดี อย่างไรก็ตามเมื่อฉันพยายามที่จะเปลี่ยนเป็น navbar คงที่ด้านบนเนื้อหาอื่น ๆ ทั้งหมดในเว็บไซต์เลื่อนขึ้นเช่น navbar ไม่ได้อยู่ที่นั่นและ navbar ทับมัน นี่เป็นวิธีที่ฉันวางไว้:
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield contentฉันพยายามที่จะคัดลอกตัวอย่าง bootstraps แต่ยังคงมีปัญหานี้เฉพาะเมื่อใช้ navbar คงที่ด้านบน ผมทำอะไรผิดหรือเปล่า?
คำตอบ:
คำตอบของคุณถูกต้องในเอกสาร :
ต้องใช้แผ่นรองร่างกาย
แถบนำทางคงที่จะซ้อนทับเนื้อหาอื่น ๆ ของคุณจนกว่าคุณจะเพิ่มไปยังด้านบนของ
padding<body>ลองใช้ค่าของคุณเองหรือใช้ตัวอย่างของเราด้านล่าง เคล็ดลับ: โดยค่าเริ่มต้น navbar จะสูง 50pxbody { padding-top: 70px; }ตรวจสอบให้แน่ใจว่าได้รวมสิ่งนี้ไว้หลังจาก Bootstrap core CSS
และในเอกสาร Bootstrap 4 ...
navbars แบบคงที่ใช้ตำแหน่ง: fixed ซึ่งหมายความว่าพวกมันถูกดึงจากโฟลว์ปกติของ DOM และอาจต้องการ CSS แบบกำหนดเอง (เช่น padding-top on) เพื่อป้องกันการทับซ้อนกับองค์ประกอบอื่น ๆ
ตามที่คนอื่น ๆ ระบุไว้ว่าการเพิ่มส่วนเสริมด้านบนให้กับร่างกายทำงานได้ดี แต่เมื่อคุณทำให้หน้าจอแคบลง (กับความกว้างของโทรศัพท์มือถือ) จะมีช่องว่างระหว่าง navbar และตัวถัง นอกจากนี้แถบนำทางที่มีผู้ใช้หนาแน่นสามารถห่อลงในแถบหลายบรรทัดเพื่อแทนที่เนื้อหาบางส่วนได้อีกครั้ง
วิธีนี้ช่วยแก้ไขปัญหาเหล่านี้ให้ฉันได้
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
body { padding-top: 0px; }
}สิ่งนี้ทำให้การ padding 40px เป็นค่าเริ่มต้นและ 0px เมื่อต่ำกว่าความกว้าง 768px (ซึ่งตามเอกสารของ bootstrap คือการตัดเลย์เอาต์ของโทรศัพท์มือถือที่จะสร้างช่องว่าง)
body { padding-top: 40px; }ก็เพียงพอแล้ว
โซลูชั่นที่มีประโยชน์มากขึ้นสำหรับการอ้างอิงของคุณมันทำงานได้สมบูรณ์แบบในทุกโครงการของฉัน:
เปลี่ยนบรรทัดแรกของคุณจาก
.navbar.navbar-fixed-topถึง
.navbar.navbar-default.navbar-static-topปัญหานี้เป็นที่รู้จักและมีวิธีแก้ปัญหาในเว็บไซต์ bootstrap twitter:
เมื่อคุณติดแถบนำทางอย่าลืมคำนึงถึงพื้นที่ที่ซ่อนอยู่ใต้ เพิ่ม 40px
<body>หรือมากกว่าของการขยายไปยัง ตรวจสอบให้แน่ใจว่าได้เพิ่มสิ่งนี้หลังจากแกน Bootstrap CSS และก่อน CSS ตัวเลือกตอบสนอง
สิ่งนี้ใช้ได้กับฉัน:
body { padding-top: 40px; }@ Ryan คุณถูกต้องการเขียนโค้ดยากจะทำให้มันทำงานไม่ดีในกรณีที่ navbars กำหนดเอง นี่คือรหัสที่ฉันใช้สำหรับ BS 3.0.0 อย่างมีความสุข:
$(window).resize(function () {
$('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});
$(window).load(function () {
$('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
}); parseIntกับค่าความสูง css ฉันเพิ่งใช้$('#main-navbar').height()แต่ไม่เช่นนั้นมันมีประโยชน์มากและแก้ไขปัญหาของฉันได้ขอบคุณ
ฉันใส่สิ่งนี้ก่อนที่จะใส่ผลตอบแทน:
<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;"> </div>ฉันชอบวิธีการนี้เนื่องจากเป็นเอกสารที่แฮ็คจำเป็นต้องใช้เพื่อให้มันทำงานได้และมันก็ใช้ได้กับ nav มือถือด้วย
แก้ไข - วิธีนี้ใช้งานได้ดีกว่ามาก:
@media (min-width: 980px) {
body {
padding-top: 60px;
padding-bottom: 42px;
}
}ปัญหาเกิดขึ้นกับ navbar-fixed-top ซึ่งจะซ้อนทับเนื้อหาของคุณยกเว้นว่าระบุการขยายตัว ไม่มีวิธีการแก้ปัญหาให้ที่นี่ในกรณี 100% วิธีการแก้ปัญหา JQuery กระพริบ / เลื่อนหน้าหลังจากโหลดหน้าซึ่งดูแปลก
ทางออกที่แท้จริงสำหรับฉันคือไม่ใช้ navbar-fixed-top แต่เป็น navbar-static-top
.navbar { margin-bottom:0px;} //for jumtron support, see http://stackoverflow.com/questions/23911242/gap-between-navbar-and-jumbotron
<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>ในขณะที่ฉันโพสต์ในคำถามที่คล้ายกันฉันประสบความสำเร็จดีในการสร้างแถบนำทางจำลองที่ไม่มีการแก้ไขก่อนหน้าแถบนำทางคงที่จริงของฉัน
<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
<!-- Nav bar details -->
</nav>ระยะห่างใช้งานได้ดีในทุกขนาดหน้าจอ
วิธีการแก้ปัญหาสำหรับ Bootstrap 4 มันทำงานได้สมบูรณ์แบบในทุกโครงการของฉัน:
เปลี่ยนบรรทัดแรกของคุณจาก
navbar-fixed-topถึง
sticky-topเวลาที่พวกเขาทำสิ่งนี้ถูกต้อง: D
โซลูชันก่อนหน้านี้ทั้งหมดจะใช้รหัส 40 พิกเซลใน html หรือ CSS ในแบบเดียวหรืออีกแบบหนึ่งโดยเฉพาะ จะเกิดอะไรขึ้นถ้า navbar มีขนาดตัวอักษรหรือรูปภาพต่างกัน? ถ้าฉันมีเหตุผลที่ดีที่จะไม่ยุ่งกับการบุร่างกายในตอนแรกล่ะ? ฉันได้ค้นหาวิธีแก้ไขปัญหานี้และนี่คือสิ่งที่ฉันมาด้วย:
$(document).ready(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
$(window).resize(function(){
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
});คุณสามารถเลื่อนขึ้นหรือลงได้โดยปรับ '1' ดูเหมือนว่าจะใช้งานได้สำหรับฉันไม่ว่าขนาดของเนื้อหาในแถบนำทางจะเป็นอย่างไรก่อนและหลังการปรับขนาด
ฉันอยากรู้ว่าคนอื่นคิดอย่างไรเกี่ยวกับเรื่องนี้: โปรดแบ่งปันความคิดของคุณ (มันจะถูก refactored ว่าจะไม่ทำซ้ำ btw.) นอกเหนือจากการใช้ jQuery มีเหตุผลอื่นที่จะไม่เข้าหาปัญหาด้วยวิธีนี้หรือไม่? ฉันได้ทำงานกับ navbar รองเช่นนี้:
$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
+ $('.admin-nav').height() + 1 )+'px'});PS: ด้านบนอยู่บน Bootstrap 2.3.2 - มันจะทำงานใน 3.x ตราบใดที่ชื่อคลาสทั่วไปยังคงอยู่ ... ในความเป็นจริงมันควรจะทำงานโดยอิสระจาก bootstrap ใช่ไหม?
แก้ไข: นี่คือฟังก์ชั่น jquery ที่สมบูรณ์ที่จัดการสอง navbars คงที่ตอบสนองคงขนาดแบบไดนามิก มันต้องการคลาส 3 html (หรืออาจใช้ id): user-top, admin-top และ contentwrap:
$(document).ready(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
$(window).resize(function(){
$('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
$('.contentwrap') .css({'padding-top': (
$('.user-top').height()
+ $('.admin-top').height()
+ 0 )+'px'
});
});เปลี่ยนเพียงกับfixed-top sticky-topด้วยวิธีนี้คุณจะไม่ต้องคำนวณการเติมเต็ม
และมันก็ใช้งานได้ !!
Also note that .sticky-top uses position: sticky, which isn’t fully supported in every browser.ดู - getbootstrap.com/docs/4.5/components/navbar/#placement
สำหรับการจัดการการพันบรรทัดในเมนูบาร์ให้ใช้ id กับ navbar เช่นนี้
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topnavbar">และเพิ่มสคริปต์เล็ก ๆ นี้ไว้ในหัวหลังจากรวม jquery เช่นนี้:
<script>
$(document).ready(function(){
$(document.body).css('padding-top', $('#topnavbar').height() + 10);
$(window).resize(function(){
$(document.body).css('padding-top', $('#topnavbar').height() + 10);
});
});
</script>ด้วยวิธีนี้การเติมเต็มส่วนบนของร่างกายจะได้รับการปรับโดยอัตโนมัติ
สำหรับ Bootstrap 3 + ฉันจะใช้ CSS ต่อไปนี้เพื่อแก้ไข navbar-fixed-top และปัญหาการกระโดดข้ามจุดยึดโยงกับ https://github.com/twbs/bootstrap/issues/1768
/* fix fixed-bar */
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
body { padding-top: 40px; }
}
/* fix fixed-bar jumping to in-page anchor issue */
*[id]:before {
display: block;
content: " ";
margin-top: -75px;
height: 75px;
visibility: hidden;
}ใช้คลาสนี้ภายในแท็ก nav
class = "navbar navbar-expand-lg navbar-light bg-light กาวเหนียว "
สำหรับ bootstrap 4
สิ่งที่คุณต้องทำคือ
@media (min-width: 980px) { body { padding-top: 40px; } } เพิ่มเติมจากคำตอบของ Nick Bisby หากคุณพบปัญหานี้โดยใช้ HAML ในรางและคุณได้แก้ไขปัญหาของ Roberto Barros ที่นี่:
ฉันแทนที่ต้องการใน "bootstrap_and_overrides.css" เป็น:
= ต้องการ twitter-bootstrap-static / bootstrap.css.erb
(ดูhttps://github.com/seyhunak/twitter-bootstrap-rails/issues/91 )
... คุณต้องวาง CSS เนื้อหาไว้ข้างหน้าข้อความสั่งดังนี้:
@import "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
@import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erbหากข้อความสั่ง require อยู่ก่อน CSS ของเนื้อความจะไม่มีผล
ฉันจะทำสิ่งนี้:
// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }สิ่งนี้ควรตรวจสอบให้แน่ใจว่าบล็อก nav ไม่ขยายหน้าเว็บและครอบคลุมเนื้อหาของหน้า
ฉันเพิ่งห่อแถบนำทางไว้ใน
<div width="100%">
<div class="nav-? ??">
...
</nav>
</div>ไม่มีโฟกัสแบบแฟนซี แต่มันใช้งานได้ ..
nav-? ??เป็นตัวแทน?