div выше navbar не выглядит как ожидалось - PullRequest
Новая
       1

div выше navbar не выглядит как ожидалось

0 голосов
/ 20 декабря 2018

Div над панелью навигации находится не в верхней части тела ( Снимок экрана ).

source: 

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
    <h1>Bootstrap Affix Example</h1>
    <h3>Fixed (sticky) navbar on scroll</h3>
    <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
    <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>

    <div class="navbar navbar-inverse" style="background-color:#026;" data-spy="affix" data-offset-top="197">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("ՏԵՍԱԿՆԵՐ", "Index", "Home")</li>
                    <li>@Html.ActionLink("ՕԳՏԱԿԱՐ ՆՅՈՒԹԵՐ", "About", "Home")</li>
                    <li>@Html.ActionLink("ԿԼԻՆԻԿԱՆԵՐ", "Contact", "Home")</li>
                    <li>@Html.ActionLink("ԲԺԻՇԿՆԵՐ", "Contact", "Home")</li>
                    <li>@Html.ActionLink("ՆՈՐՈՒԹՅՈՒՆՆԵՐ", "Contact", "Home")</li>
                    <li>@Html.ActionLink("ԲԼՈԳ", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>


.affix {
        top: 0;[enter image description here][1]
        width: 100%;
        z-index: 9999 !important;
    }

        .affix + .container-fluid {
            padding-top: 70px;
        }

Я даже пытался использовать JavaScript, но это не такПомогите.Я полагаю, Bootstrap не позволяет мне сделать это.

Ответы [ 2 ]

0 голосов
/ 20 декабря 2018

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

Чтобы исправить это ...

  • Добавьте div обертки (назовите его .bg или что-то) непосредственно внутри тега body
  • Установите для класса .bg ширину 100 (w-100)
  • Убедитесь, что панель навигации находится не в вашем классе .container, а в классе оболочки .bg

Здесь ниже я сделал простую страницу начальной загрузки с цветом фона и панель навигации внизу.Для краткости я не использовал css, вместо этого я использовал включенные в начальной загрузке классы для цвета фона, полей и т. Д.

цвет фона: # некоторый цвет;

Удачи! 

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    </head>

    <body>
        <div class="bg bg-danger">
            <div class="container-fluid">
                <div class="row w-100">
                    <h4>Bootstrap Afix Example</h4>
                </div>
                <div class="row w-100 mt-5">
                    <button type="button" class="btn-primary">button :)</button>
                </div>
                
                </div>
                <nav class="navbar navbar-default sticky-top navbar-light mt-3 w-100 bg-secondary">
                    <ul class="nav mr-auto mt-1 mb-1">
                        <li class="nav-item">
                            <a href="INSERT_YOUR_LINK" class="nav-item text-warning">Home</a>
                        </li>
                        <li class="nav-item ml-3">
                            <a href="INSERT_YOUR_LINK" class="nav-item text-warning">About</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    </body>
</html>
0 голосов
/ 20 декабря 2018

Вы пытались добавить position:absolute или position:fixed к элементу .container-liquid элемента?

(https://developer.mozilla.org/en-US/docs/Web/CSS/position)

Я не могу повторно создатьВаша проблема. Это должно работать, так как это в значительной степени пример из w3schools .

Это может помочь, если вы предоставите минимальный рабочий пример своего кода в виде фрагмента стека или что-то вроде bootply или jsfiddle.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...