Bootstrap Nav-Bar не реагирует - PullRequest
Новая
       6

Bootstrap Nav-Bar не реагирует

0 голосов
/ 04 февраля 2019

в первый раз, используя Bootstrap для разработки веб-сайта и возникли проблемы с меню.Я посмотрел, как выглядит сайт на разных устройствах, как только он достигает 800 х 600, меню сверху не складывается сверху.Я прикрепил 3 изображения только с первым изображением, где оно выглядит правильно.Я также включил начальную шкалу окна просмотра = 1 в тег заголовка, который я видел в другом сообщении ...

Меню выглядит нормально Меню не корректно складывается на маленьком мобильном устройстве

Может кто-нибудь указать мне правильное направление для исправления кода? 

<nav class="navbar navbar-expand-md">
    <div class="container-fluid">
    <a class="navbar-brand text-left" href="index.html">iStudy University <i class="fas fa-graduation-cap"></i></a>


        <div class="navbar-nav ml-auto">
        <a id="menu-nav" class="nav-item nav-link px-3" href="index.html"><i class="fas fa-home" ></i> Home</a>
        <a id="menu-nav" class="nav-item nav-link px-3" href="#"><i class="fas fa-info-circle"></i> About</a>
        <a id="menu-nav" class="nav-item nav-link px-3" href="contact.html"><i class="fas fa-envelope"></i> Contact Us</a>

        <form class="form-inline px-2" action="#">
            <button class="btn btn-dark" type="submit">Sign Up</button>
            <button class="btn btn-dark" type="submit"><i class="fas fa-sign-in-alt"></i>Login</button>
        </form>
        </div>
    </div>
</nav>


    #menu-nav{
color: white;
}

/*TO COME BACK TO - BACKGROUND IMAGE TO HOMEPAGE*/
.site-header {
  background: url(img/home-header.jpg) no-repeat center;
  background-size: cover;
        }

.site-header .layout-hero {
  min-height: 100vh;
}

.navbar, .btn-dark {
  font-family: 'Amatic SC', cursive;
  font-weight: 800;
  border-radius: 25px;
  color: white;
}

.navbar-brand {
  font-size: 2.5rem;
  font-family: 'Amatic SC', cursive;
  font-weight: 600;
  color: white;
}

/*This is for the i in the logo name */
.navbar-brand::first-letter {
  font-family: 'Charm', cursive;
  color: #f5f5f5;
  text-shadow: 1px 1px #45b39d;
}


/*This is to override the logo defult blue */
.navbar-brand:hover {
  color: white;
}

/*Just for the menu */
.navbar-nav {
  background-image: linear-gradient(to bottom right, #5dade2, #45b39d);;
  padding: 4px;
  border-radius: 25px;
  box-shadow: 1px 2px 1px slategrey;
}

.navbar-collapse .nav-link{
  display: inline-block;
  background :#45b39d;
}
/*for small  devices*/

@media(max-width: 767px){
  .navbar-brand {
    font-size: 2.1rem;
  }

  .navbar-dark .navbar-toggler {
    border-color: rgba(255,255,255,.5);
  }

}

1 Ответ

0 голосов
/ 05 февраля 2019

Если вы хотите, чтобы все элементы меню отображались один под другим, добавьте это в свой медиа-запрос 

 @media(max-width: 767px){
    // the code to add
    .form-inline{
       display:flex;
       flex-direction: column;
     }
   // end
  }
...