Bootstrap navbar переходит в следующий раздел в мобильном представлении - PullRequest
Новая
       34

Bootstrap navbar переходит в следующий раздел в мобильном представлении

0 голосов
/ 16 февраля 2020

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

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

image

Ниже CSS: 

  font-size: 30px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* Navigation Bar */


.navbar {
  background-color: #FFFFFF;
  text-align: center;
  height: 70px;
}

.navbar-md-brand {
  height: 70px;
  width: 276px;
padding-top: 10px;
}

.nav-item {
  padding: 18px;
}

.nav-link {
  font-family: "ubuntu",sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
}

.navbar-light .navbar-nav .nav-link .navbar-toggler-icon {
  color: #21bf73;
}


/* Carousel */

.carousel-control-prev {
  margin-left: -100px;
}

.carousel-control-next {
  margin-right: -100px;
}

/* Download Buttons*/
.download-button {
  margin: 5% 3% 5% 0;
}

.headings-slides{
  padding-left: 20px;


}

.hr-slides{
margin-top: 20px;
margin-left: 30px;
}

.hr-nav{
margin-top: inherit;
border-top: 3px solid black;
}

h2{
  color: #478559;
  font-family: "ubuntu",sans-serif;
}

1 Ответ

0 голосов
/ 17 февраля 2020

Есть несколько способов исправить это. Поскольку вы используете пользовательский .navbar-md-brand, самый простой способ - установить его следующим образом: 

.navbar-md-brand {
  height: 70px;
  max-width: 276px;
  flex-grow: 1; /* let it "spread" until max-width */
  padding-top: 10px;
}

Для идеального сценария вам необходимо проверить эти контрольные точки и «переписать» .navbar-md-brand для угловых случаев , если вам нужны https://getbootstrap.com/docs/4.4/layout/overview/#responsive -пункты

Или вы можете придерживаться «официального» способа ведения дел и использовать некоторые из существующих классов, например class="navbar-brand mb-0" https://getbootstrap.com/docs/4.4/components/navbar/#brand

В любом случае, надеюсь, эти советы помогут вам.

...