Bootstrap navbar к началу на маленьком экране - PullRequest
Новая
       52

Bootstrap navbar к началу на маленьком экране

0 голосов
/ 29 июня 2019

Я стремлюсь к достижению простой функциональности, но не могу найти хорошее решение ни в одной из документации по Bootstrap или где-либо в Интернете.Я хотел бы создать навигационную панель в начальной загрузке, которая находится в левой части экрана.Когда размер экрана небольшой, я бы хотел, чтобы панель навигации находилась в верхней части экрана.Как этого достичь?В идеале я хотел бы добиться этого строго через HTML или CSS.

1 Ответ

0 голосов
/ 29 июня 2019

Bootstrap не поддерживает выровненные по левому краю навигационные панели. Но вы можете сделать это самостоятельно с помощью медиа-запросов. Вот простой пример: 

/* mobile default is left aligned */
.navbar {
  position: fixed;
  left: 0;
  top: 0;
  display: inline-block;
  width: 50px;
  height: 100%; 
}

.navbar-item {
  /* navbar items shown vertically on mobile */
  display: block;
}

@media screen and (min-width: 480px) {
  .navbar {
    /* morphs to full width on top on screens larger than mobile */
    height: 50px;
    width: 100%;
  }

  .navbar-item {
    /* Navbar items are now rendered side by side */
    display: inline-block;
  }
}

Надеюсь, это поможет! дайте мне знать, если у вас есть еще вопросы.

РЕДАКТИРОВАТЬ: Вот пример рабочей ссылки codepen с этим кодом: https://codepen.io/anon/pen/ewyLvW

...