Bootstrap Кнопки Navbar складываются в мобильном телефоне

Question

Я добавил кнопки к моей Bootstrap навигационной панели следующим образом:

Он отлично выглядит на рабочем столе (за исключением цветов, но я исправлю это позже), но на мобильном они складываются, а не даже укладываются прямо друг на друга. Не уверен, почему он автоматически перемещается вверх:

Как заставить два значка оставаться рядом друг с другом? Там должно быть много недвижимости для кнопок, которые не должны складываться в мобильном телефоне.

Answer 1

Вам необходимо добавить «flex-row align-items-center» в класс ul и удалить «float-right» из последнего класса кнопок. Это предопределенные классы bootstrap 4, поэтому нет необходимости писать дополнительные CSS для этого. Это покажет те же результаты, что и на рабочем столе.

 <ul class="navbar-nav ml-auto flex-row align-items-center">
    <!-- Button trigger modal -->
    <li class="nav-item">
      <button class="btn btn-warning" onclick="locateMe()">
        <i class="fas fa-street-view"> </i>
      </button>
    </li>
    <li class="nav-item">
      <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal">
        <i class="fas fa-filter"></i>
      </button>
    </li>
  </ul>

Answer 2

Я бы не советовал использовать плавающие кнопки на ваших кнопках, вместо этого старайтесь оставаться последовательными и используйте встроенные дисплеи на них. Несмотря на это, я не знаю, как устроены ваши стили, поэтому самое простое решение, которое я нашел для вашей проблемы без изменения каких-либо других классов, это просто добавить это к вашему css:

@media (max-width: 768px) {
  .navbar-nav {
    flex-direction: row;
  }
}

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