Bootstrap: меню гамбургеров не будет отображаться - PullRequest
Новая
       16

Bootstrap: меню гамбургеров не будет отображаться

0 голосов
/ 07 июня 2018 
<div class="container-fluid border navbar-expand-lg" style="overflow:visible; background-color: #ffffff">
    <a href="#" class="nameBlock"> Vamsi Krishna Pappusetti</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="list" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button> 
    <ul class="nav justify-content-end" style="display: inline-flex;" id="list">    
        <li class="nav-item">
          <a class="nav-link " href="#">About Me</a>
        </li>
        <li class="nav">
          <a class="nav-link" href="contact.html">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="C:\Users\vpvam\BootcampClassFiles\Bootstrap-Portfolio\portfolio.html">Portfolio</a>
        </li>
    </ul>
</div>

// Почему мои «О себе», «Контакты» и «Портфолио» не попадают в меню гамбургеров, когда я сверну экран?Я скопировал код кнопки из Bootstrap. введите описание изображения здесь

1 Ответ

0 голосов
/ 08 июня 2018

Вам необходимо указать цветовую схему панели навигации , иначе значок переключателя не будет стилизован.

у вас также есть некоторые другие несоответствия.Вы можете начать сначала с копии примера панели навигации для BS4 и повторить попытку.Настройте элементы меню перед тем, как начинать удалять контейнеры или переопределять стили. 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>


<div class="container-fluid border navbar-expand-lg navbar-light" style="overflow:visible; background-color: #ffffff">
    <a href="#" class="nameBlock"> Vamsi Krishna Pappusetti</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="list" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button> 
    <ul class="nav justify-content-end" style="display: inline-flex;" id="list">    
        <li class="nav-item">
          <a class="nav-link " href="#">About Me</a>
        </li>
        <li class="nav">
          <a class="nav-link" href="contact.html">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="C:\Users\vpvam\BootcampClassFiles\Bootstrap-Portfolio\portfolio.html">Portfolio</a>
        </li>
    </ul>
</div>
...