Bootstrap css фиксированный заголовок без пробела

У меня есть страница (номер 2 на картинке). Я хочу зафиксировать заголовок, но контейнер находился под заголовком. Я не понимаю, почему.Bootstrap css фиксированный заголовок без пробела

Изображение № 1 является примером кода. Есть хороший.

Неправильно? Надеюсь, кто-то может мне помочь! Благодаря (Laravel 5)

Пример: https://getbootstrap.com/examples/navbar-fixed-top/# Моя страница:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>Laravel</title> 

    <!-- Fonts --> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'> 
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'> 

    <!-- Styles --> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 

    <style> 
     body { 
      font-family: 'Lato'; 
     } 

     .fa-btn { 
      margin-right: 6px; 
     } 
    </style> 
</head> 
<body id="app-layout"> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 

       <!-- Collapsed Hamburger --> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse"> 
        <span class="sr-only">Toggle Navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 

       <!-- Branding Image --> 
       <a class="navbar-brand" href="http://test.dev"> 
        Laravel 
       </a> 
      </div> 

      <div class="collapse navbar-collapse" id="app-navbar-collapse"> 
       <!-- Left Side Of Navbar --> 
       <ul class="nav navbar-nav"> 
        <li><a href="http://test.dev/home">Home</a></li> 
       </ul> 

       <!-- Right Side Of Navbar --> 
       <ul class="nav navbar-nav navbar-right"> 
        <!-- Authentication Links --> 
              <li><a href="http://test.dev/login">Login</a></li> 
         <li><a href="http://test.dev/register">Register</a></li> 
            </ul> 
      </div> 
     </div> 
    </nav> 

    <div class="container"> 
    <div class="row"> 
     <div class="col-md-10 col-md-offset-1"> 
      <div class="panel panel-default"> 
       <div class="panel-heading">Welcome</div> 

       <div class="panel-body"> 
        Your Application's Landing Page. 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

    <!-- JavaScripts --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

</body> 
</html>

источник

2016-04-17 ketom

-1

Может быть, это решение Виль полезно JSFIDLE

UPDATE: Smarties путь будет добавить новый класс с разделителем строк, поэтому ваш bootstrap css останется нетронутым.

.row-withmargin{ 
    margin-right: -15px; 
    margin-left: -15px; 
    padding-top: 70px; 
}

источник

2016-04-17 13:26:39

Body padding required

Неподвижная Navbar будет накладывать свой другой контент, если не добавить отступы в верхней части <body>. Попробуйте свои собственные значения или используйте наш фрагмент ниже. Совет: По умолчанию навигационная панель имеет высоту 50 пикселей.

body { padding-top: 70px; }

Обязательно включите это после основного бутстрага CSS.

В примерном ссылке вы предоставили, изображение 1, имеет контейнер под названием jumbotron, который имеет padding 60px;, что является причиной его содержимое не скрыты под навигационной панели

Demo

источник

2016-04-17 14:41:22 Pbk1303

Согласно bootstrap documentation Фиксированный навигатор наложит на ваш другой контент, если вы не добавите padding в начало <body>.

CSS:

body{ 
padding:70px; 
}

или

Поместите содержимое в JumboTron контейнере как в image1 и удалить background-color из JumboTron с вашим собственным css

источник

2016-04-17 21:45:16

Bootstrap css фиксированный заголовок без пробела

ответ

Смежные вопросы