Bootstrap css ซ่อนส่วนของคอนเทนเนอร์ด้านล่าง navbar navbar-fixed-top

127

ฉันกำลังสร้างโปรเจ็กต์ด้วย Bootstrap และฉันประสบปัญหาเล็กน้อยฉันมีคอนเทนเนอร์ด้านล่าง Nav -top ปัญหาของฉันคือบางส่วนของคอนเทนเนอร์ของฉันซ่อนอยู่ด้านล่างส่วนหัวของ nav-top ฉันไม่ต้องการใช้ขอบบนกับ ภาชนะ โปรดดู html ด้านล่างที่ฉันประสบปัญหา

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/stylesheets/bootstrap.css"/>
<link rel="stylesheet" href="~/stylesheets/bootstrap-responsive.css"/>

</head>
<body>
    <div class="navbar navbar-fixed-top ">
        <div class="navbar-inner">
            <div class="container">
           <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
                <div class="nav-collapse"><ul class="nav" id="navbar"><li ng-class="{active:section=='plunks'}" class="active"><a href="/plunks/trending"><i class="icon-home"></i>Home</a></li><li><a target="_self" href="/edit/"><i class="icon-calendar"></i>General Election 2014</a></li><li class="divider-vertical">
                    </li><li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">
                        <i class="icon-eye-open">
                        </i>Assembly Elections
                        <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                                <li><a href="#/HTML5Apps">Assembly Elections 2013</a></li>
                        </ul>
                         </li><li class="divider-vertical">
                    </li><li ng-class="{active:section=='tags'}"><a href="/tags"><i class="icon-th"></i>Constituecy</a></li><li ng-class="{active:section=='discuss'}"><a href="/discuss"><i class="icon-time"></i>Election News</a></li><li class="divider-vertical"></li><li><a href="https://github.com/filearts/plunker"><i class="icon-bell"></i>Candidate</a></li></ul></div>
             </div>
         </div>
    </div>
  <div  class="container" >
   <ul class="nav nav-pills">
    <li class="active">
    <a href="#">Popular</a>
    </li>
    <li><a href="#">Trending</a></li>
    <li><a href="#">Latest</a></li>
    </ul>
   </div>

    <script src="~/Scripts/jquery.js"></script>
    <script src="~/Scripts/bootstrap-dropdown.js"></script>
    <script src="~/Scripts/Collapse.js"></script>
</body>
</html>

css twitter-bootstrap

— อาจารย์เบนิวัล
แหล่งที่มา

จากเอกสาร bootstrap: แก้ไขไปที่ด้านบนเพิ่ม. navbar-fixed-top และอย่าลืมคำนึงถึงพื้นที่ที่ซ่อนอยู่ด้านล่างโดยการเพิ่มช่องว่างอย่างน้อย 40px ลงใน <body> อย่าลืมเพิ่มสิ่งนี้หลัง CSS Bootstrap หลักและก่อน CSS ที่ตอบสนองที่เป็นทางเลือก

— cms_mgr

215

ซึ่งจัดการได้โดยการเพิ่มบางส่วนpaddingที่ด้านบนของไฟล์<body>.

ตามเอกสารของ Bootstrap.navbar-fixed-topให้ลองใช้ค่าของคุณเองหรือใช้ตัวอย่างข้อมูลด้านล่าง เคล็ดลับ: โดยค่าเริ่มต้นค่าnavbarจะ50pxสูง

  body {
    padding-top: 70px;
  }

นอกจากนี้มาดูที่มาสำหรับเป็นตัวอย่างนี้starter-template.cssและเปิดกว้าง

— จางไป
แหล่งที่มา

1

ฉันเพิ่มช่องว่างภายใน 60px ระหว่าง css ที่ตอบสนองและ css ปกติและมันก็ใช้งานได้ดี

— Ajay Beniwal

1

ปัญหาคือ .. ถ้าฉันปรับแต่ง bootstrap ผ่านลิงก์ปรับแต่ง .. แล้วฉันไม่ได้รับ responsive css แยกกัน ... ดังนั้นจึงไม่มีวิธีใดที่จะระบุการประกาศ "ระหว่าง" ทั้งสองนี้ นอกจากนี้คำแนะนำ add-some-tag-between-my-normal-and-responsive-css นี้ .. ดูเหมือนจะแฮ็กนิดหน่อย ไม่ได้หรือ จะต้องมีทางออกที่ดีกว่านี้

— วีเจ.

หากคุณใช้ LESS ให้ใช้ตัวแปร bootstrap @ navbar-height เพื่อค้นหาความสูงของแถบนำทาง

— yankee

3

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

— mastov

1

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

— Taylor Brown

37

ฉันเดาว่าปัญหาของคุณเกี่ยวข้องกับความสูงแบบไดนามิกที่แถบนำทางคงที่ที่ด้านบนมี ตัวอย่างเช่นเมื่อผู้ใช้เข้าสู่ระบบคุณต้องแสดง " สวัสดี [ชื่อผู้ใช้] " บางประเภทและเมื่อชื่อกว้างเกินไปแถบนำทางจำเป็นต้องใช้ความสูงมากขึ้นเพื่อให้ข้อความนี้ไม่ทับซ้อนกับเมนูแถบนำทาง เนื่องจากแถบนำทางมีลักษณะเป็น " ตำแหน่ง: คงที่ " ร่างกายจะอยู่ข้างใต้และส่วนที่สูงกว่าของมันจะซ่อนอยู่ดังนั้นคุณต้อง "แบบไดนามิก" เปลี่ยนช่องว่างที่ด้านบนทุกครั้งที่ความสูงของแถบนำทางเปลี่ยนไปซึ่งจะเกิดขึ้นในสิ่งต่อไปนี้ สถานการณ์กรณี:

เพจถูกโหลด / โหลดซ้ำ
หน้าต่างเบราว์เซอร์ถูกปรับขนาดเนื่องจากอาจกระทบกับเบรกพอยต์ที่ตอบสนองที่แตกต่างกัน
navbarเนื้อหาที่มีการแก้ไขตรงหรือทางอ้อมเช่นนี้อาจก่อให้เกิดการเปลี่ยนแปลงสูง

ความไดนามิกนี้ไม่ครอบคลุมโดยCSSปกติดังนั้นฉันจึงคิดได้เพียงวิธีเดียวในการแก้ปัญหานี้หากผู้ใช้เปิดใช้งานJavaScript โปรดลองใช้ข้อมูลโค้ดjQueryต่อไปนี้เพื่อแก้ไขสถานการณ์กรณีที่ 1 และ 2 สำหรับกรณีสถานการณ์ที่ 3 โปรดอย่าลืมเรียกใช้ฟังก์ชันonResize ()หลังจากการเปลี่ยนแปลงใด ๆ ในเนื้อหาnavbar :

var onResize = function() {
  // apply dynamic padding at the top of the body according to the fixed navbar height
  $("body").css("padding-top", $(".navbar-fixed-top").height());
};

// attach the function to the window resize event
$(window).resize(onResize);

// call it also when the page is ready after load or reload
$(function() {
  onResize();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

ขยายข้อมูลโค้ด

— LuckyBrain
แหล่งที่มา

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

— Ripside

20

เพียงกำหนด navbar ว่างก่อนกำหนดก็จะสร้างพื้นที่ที่ต้องการ

<nav class="navbar navbar-default ">
</nav>
<nav class="navbar  navbar-default navbar-fixed-top ">
     <div class="container-fluid">
// Your menu code 
     </div>
</nav>

— move.over
แหล่งที่มา

8

นี่เป็นวิธีที่น่ารังเกียจในการทำสิ่งต่างๆ

— DotSlashCoding

ปิด แต่ไม่รวมรายการในแถบนำทางจริง - เว้นแต่คุณจะทำซ้ำเมนูทั้งหมดที่นั่น

— Ripside

เห็นด้วยกับ @DotSlashCoding วิธีนี้ไม่ใช่แนวทางปฏิบัติในการเขียนโค้ดที่ดี (ล้มเหลวในการทดสอบการบำรุงรักษาโดยไม่มีเหตุผลที่ดี) ยังไม่ชัดเจนในทันทีว่าสิ่งพิเศษนี้navbarทำอะไร

— fragilewindows

ปฏิบัติและเย็น ฉันยังคิดว่าวิธีแก้ปัญหาทั้งหมดนี้เป็นเรื่องที่น่ารังเกียจ

— de.

8

มันเกิดขึ้นเนื่องจากในnavbar-fixed-topคลาส navbar ได้รับไฟล์position:fixed. สิ่งนี้จะเปลี่ยน navbar ออกจากโฟลว์เอกสารออกจากเนื้อหาเพื่อใช้พื้นที่ด้านหลัง navbar

คุณจำเป็นต้องใช้padding-topหรือmargin-topที่คุณขึ้นอยู่กับความต้องการของคุณมีค่าcontainer >= 50px(หรือเล่นกับค่าต่างๆ)

บูตพื้นฐานnavbar40pxใช้เวลารอบสูง ดังนั้นถ้าคุณให้padding-topหรือmargin-topของ50px หรือมากกว่าคุณมักจะมีพื้นที่หายใจระหว่างคุณภาชนะบรรจุและ navbar

— ปวีณปุเกลีย
แหล่งที่มา

6

ฉันก็มีปัญหานี้เช่นกัน แต่แก้ไขได้โดยไม่ต้องใช้สคริปต์และใช้ CSS เท่านั้น ฉันเริ่มต้นด้วยการทำตาม padding-top ที่แนะนำสำหรับเมนูคงที่โดยการตั้งค่า 60px ที่อธิบายไว้ในเว็บไซต์ Bootstrap จากนั้นฉันเพิ่มแท็กสื่อสามแท็กที่ปรับขนาดช่องว่างที่จุดตัดที่เมนูของฉันปรับขนาดด้วย

<style>      
    body{
        padding-top:60px;
    }
    /* fix padding under menu after resize */
    @media screen and (max-width: 767px) {
        body { padding-top: 60px; }
    }
    @media screen and (min-width:768px) and (max-width: 991px) {
        body { padding-top: 110px; }
    }
    @media screen and (min-width: 992px) {
        body { padding-top: 60px; }
    }
</style>

หมายเหตุอย่างหนึ่งเมื่อความกว้างของเมนูอยู่ระหว่าง 768 ถึง 991 โลโก้เมนูในเลย์เอาต์ของฉันบวกกับ<li>ตัวเลือกจะทำให้เมนูห่อเป็นสองบรรทัด ดังนั้นฉันต้องปรับ padding-top เพื่อป้องกันไม่ให้เมนูครอบคลุมเนื้อหาด้วยเหตุนี้ 110px

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

— ฮาร์วีย์ Mushman
แหล่งที่มา

6

ฉันรู้ว่าเธรดนี้เก่า แต่ฉันเพิ่งเจอปัญหานั้นและฉันแก้ไขได้โดยใช้page-headerคลาสในเพจของฉันภายใต้การนำทาง นอกจากนี้ฉันยังใช้<nav>แท็กแทน<div>แต่ฉันไม่แน่ใจว่ามันจะนำเสนอพฤติกรรมที่แตกต่างออกไป

การใช้page-headerเป็นคอนเทนเนอร์สำหรับเพจคุณไม่จำเป็นต้องยุ่งกับสิ่ง<body>นี้หากคุณไม่เห็นด้วยกับพื้นที่เริ่มต้นที่page-headerให้ไว้

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



   <div class="container-fluid">
        <nav class="navbar navbar-default navbar-fixed-top">
    
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Bootstrap</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li class="dropdown-header">Nav header</li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                </ul>
                <div class="navbar-right">
                </div>
            </div>
        </nav>
    </div>
    <div class="page-header">
        <div class="clearfix">
            <div class="col-md-12">
                <div class="col-md-8 col-sm-6 col-xs-12">
                    <h1>Registration form <br /><small>A Bootstrap template showing a registration form with standard fields</small></h1>
                </div>
            </div>
        </div>
    </div>
        <div class="container">
        <div class="row">
            <form role="form">
                <div class="col-lg-6">
                    <div class="well well-sm"><strong><span class="glyphicon glyphicon-asterisk"></span>Required Field</strong></div>
                    <div class="form-group">
                        <label for="InputName">Enter Name</label>
                        <div class="input-group">
                            <input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="InputEmail">Enter Email</label>
                        <div class="input-group">
                            <input type="email" class="form-control" id="InputEmailFirst" name="InputEmail" placeholder="Enter Email" required>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="InputEmail">Confirm Email</label>
                        <div class="input-group">
                            <input type="email" class="form-control" id="InputEmailSecond" name="InputEmail" placeholder="Confirm Email" required>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="InputMessage">Enter Message</label>
                        <div class="input-group">
                            <textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right">
                </div>
            </form>
    </div>

ขยายข้อมูลโค้ด

— Zorkind
แหล่งที่มา

3

ฉันแก้ไขโดยใช้ jquery

<script type="text/javascript">
$(document).ready(function(e) {
   var h = $('nav').height() + 20;
   $('body').animate({ paddingTop: h });
});
</script>

ขยายข้อมูลโค้ด

— CruzDelSur
แหล่งที่มา