Показывать содержимое начальной загрузки над Navbar - PullRequest
Новая
       0

Показывать содержимое начальной загрузки над Navbar

0 голосов
/ 08 октября 2018

Как отобразить контент над панелью начальной загрузки.Я попробовал приведенный ниже код, но получил содержимое дисплея под панелью навигации.

index.html 

 <body>
  <div class="container" id="topContent">Desktop only content above nav..</div>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">Start Bootstrap</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
  </nav>

style.css 

  @media (max-width: 767px) { 
       .navbar{
          margin-top:0;
          top:-65px;
           position:relative;
        }
        #topContent{
          margin-top:45px;
        }

Ответы [ 4 ]

0 голосов
/ 08 октября 2018

Полагаю, что лучший способ сделать это - не вмешиваться в компоненты Actual bootstrap, как кто-либо посоветует вам, кто работал с ним в последние пару лет.

Самый простой способ добиться того, чтовы хотите создать два отдельных поля содержимого внутри Navbar следующим образом: 

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    HELLOO
  </div>
  <div class="container">
    <a class="navbar-brand" href="#">Start Bootstrap</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
 </nav>

Использование двух контейнеров внутри панели навигации гарантирует, что они будут оставаться друг над другом.Это может также повлиять на адаптивный дизайн, но вы можете в одиночку стереть разные контейнеры для определенных разрешений, где вы не хотите, чтобы они появлялись.

Вы не должны пытаться использовать много CSS здесь, потому что это выглядитлегко.Определение материала в части html намного эффективнее и может сэкономить вам много времени в дальнейшем:)

0 голосов
/ 08 октября 2018

Если вы хотите использовать фиксированный Navbar, вы бы использовали min-width вместо максимальной ширины в медиа-запросе ... 

@media (min-width: 992px) { 
   .navbar{
      margin-top:0;
      top:45px;
    }
}

Демонстрация 1: https://www.codeply.com/go/l0MAcYsfO2

ЕслиВы хотите избежать лишних CSS , используйте один из адаптивных служебных классов.Например, используйте mt-lg-5 для верхнего поля, которое применяется только на рабочем столе (lg и выше). 

<div class="container" id="topContent">Desktop only content above nav..</div>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top mt-lg-5">
  <div class="container">
  </div>
</nav>

Демонстрация 2: https://www.codeply.com/go/voowMd6pom

См. Также: Начальная строка заголовка шириной 4 страницы над панелью навигации

0 голосов
/ 08 октября 2018

Попробуйте удалить класс fixed-top в nav class=

HTML 

<body>
  <div class="container" id="topContent">Desktop only content above nav..</div>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Start Bootstrap</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
  </nav>

В CSS попробуйте: 

@media (max-width: 767px) { 
       .navbar{
          margin-top: 20px // the size that you want to your div above the navbar
        }
        #topContent{
          top: 0;
          position: fixed;
        }

Помните, что в этом CSS вы устанавливаете классы для max-width: 767px, поэтому протестируйте экран такого размера, дайте мне знать, что работает:)

0 голосов
/ 08 октября 2018

В этом коде есть 

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">

класс с фиксированной вершиной.Это сделает панель навигации фиксированной только сверху

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

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

...