У меня есть страница (номер 2 на изображении). Хочу исправить заголовок, но контейнер был под заголовком. Не понимаю почему.

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

Что случилось? Я надеюсь, что кто-то может мне помочь! Спасибо (Laravel 5)

enter image description here

Пример: 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>
0
ketom 17 Апр 2016 в 16:04

3 ответа

Лучший ответ

Возможно это решение будет полезно JSFIDDLE

ОБНОВЛЕНИЕ: Умный способ - добавить новый класс с div строки, чтобы ваш bootstrap css остался нетронутым.

.row-withmargin{
    margin-right: -15px;
    margin-left: -15px;
    padding-top: 70px;
}
-1
MR.Don't know 17 Апр 2016 в 13:32

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

CSS:

body{
padding:70px;
}

Или

Поместите свой контент в контейнер jumbotron , как на изображении1, и удалите background-color jumbotron своим собственным css

3
Arvin 17 Апр 2016 в 21:53

Требуется заполнение основного текста

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

body { padding-top: 70px; }

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

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

Демо

3
Pbk1303 26 Апр 2016 в 10:31