Bossstrap css приховує частину контейнера внизу-навер-фіксованого верху

127

Я будую проект з Bootstrap, і я стикаюся з невеликою проблемою. У мене є контейнер нижче Nav-top.My проблема полягає в тому, що деяка частина мого контейнера прихована під заголовком nav-top.Я не хочу використовувати верхню маржу з контейнер. Pls дивіться нижче 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-fix-top і не забудьте врахувати приховану область під ним, додавши щонайменше 40 пікселів до <body>. Не забудьте додати це після основної завантажувальної CSS та перед необов'язковим 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

проблема полягає в тому, що ... якщо я налаштувати завантажувальний засіб за допомогою посилання для налаштування .. тоді я не отримую чутливий css окремо ... тому немає можливості надати це "між" двома деклараціями. Також ця добавка-тег-між-моїм-нормальним-та-реагуючою-css порадою .. здається трохи хакішною. Чи не так? Має бути краще рішення, ніж це.

— VJ.

Якщо ви використовуєте МЕНШЕ, використовуйте змінну завантажувача @ navbar-height, щоб знайти висоту navbar.

— янкі

3

Це скоріше обхід, аніж рішення: хоча це допомагає вгорі сторінки, якір і таке подібне досі не працюють. Якщо ви перейдете до підрозділу за допомогою якорів, заголовок підрозділу опиниться за навігаційним рядком.

— мастов

1

чому це починається з початку, хтось знає? це тільки почало траплятися зі мною, який відчував себе нізвідки, і я досі не можу знайти джерело того, що зламало його для початку.

— Тейлор Браун

37

Я думаю, що проблема у вас пов’язана з динамічною висотою, яку має фіксований навбар у верхній частині. Наприклад, коли користувач входить у систему, вам потрібно відобразити якесь " Привіт [Ім'я користувача] ", а коли ім'я занадто широке, навігатору потрібно використовувати більше висоти, щоб цей текст не збігався з меню навігації . Оскільки на панелі навигації є стиль " положення: фіксований ", тіло залишається під ним, і більш висока його частина стає прихованою, тому вам потрібно "динамічно" міняти накладки вгорі кожного разу, коли висота навигації змінюється в наступному сценарії випадку:

Сторінка завантажується / перезавантажується.
Зміна розміру вікна браузера, оскільки це може призвести до іншої точки чутливості.
Вміст навігації змінюється прямо або опосередковано, оскільки це може спровокувати зміну висоти.

Ця динаміка не поширюється на звичайний 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
джерело

Це те, що я шукав. Оптимізовано його, зберігаючи ширину вікна та перевіряючи, чи змінився лише вертикальний розмір.

— Ріпсайд

20

Просто визначте порожній навбар перед фіксованим, він створить необхідний простір.

<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

Закрийте, але не враховуйте загортання елементів у справжній панель навігації - якщо ви не дублюєте все меню там.

— Ріпсайд

Погодьтеся з @DotSlashCoding, цей підхід не є хорошою практикою кодування (не спрацьовує тест ремонтопридатності без поважних причин). Не ясно відразу, що navbarробить цей додатковий .

— fragilewindows

Прагматичний і крутий. Я також вважаю, що всі рішення цього питання противні.

— де.

8

Це відбувається тому, що з navbar-fixed-topкласом навбар отримує position:fixed. Це в свою чергу виводить навибар з потоку документів, залишаючи тіло, щоб зайняти простір позаду панелі.

Вам потрібно звернутися padding-topабо margin-topдо своїх container, виходячи зі своїх вимог зі значеннями >= 50px. (або пограти з різними значеннями)

Основна навігаційна система завантажувача займає висоту навколо 40px. Так що, якщо ви даєте padding-topабо margin-topз 50px або більше, ви завжди будете мати , що перепочинок між вашим контейнером і навігаційною панеллю.

— Praveen Puglia
джерело

6

Я теж мав цю проблему, але вирішив її без скрипту і лише за допомогою CSS. Я починаю з дотримування рекомендованої накладки для фіксованого меню, встановивши 60 пікселів, описаних на веб-сайті 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.

Сподіваюся, це допомагає ...

— Гарві Мушман
джерело

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>

Розгорніть фрагмент

— Зоркінд
джерело

3

Я вирішив це за допомогою jquery

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

Розгорніть фрагмент

— CruzDelSur
джерело