Как отобразить Bootstrap Меню Navbar по горизонтали без гамбургера

Question

Я пытаюсь использовать крошечное меню bootstrap navbar (у меня есть bootstrap3 - тег говорит 4, но я не могу найти тег для v3). Я пытаюсь заставить его отображать без гамбургера и отображать значки по горизонтали. Это происходит на дисплее P C, но не на моем мобильном устройстве (телефон Samsung).

Скачано с:

Я немного изменил код, и он отлично отображается в chrome для p c (проблемы, которые у меня были до того, как я изменил код). Это css:

.navbar-xs { min-height:22px; border-radius:0} 
.navbar-xs .navbar-brand{ padding: 2px 8px;font-size: 14px;line-height: 14px; } 
.navbar-xs .navbar-nav > li > a { border-right:1px solid #ddd; padding-top: 2px; padding-bottom: 2px; line-height: 16px }

Это модифицированный код меню навигационной панели:

<div class="container">
    <nav class="navbar navbar-default navbar-xs" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li><a href="#"><i class="glyphicon glyphicon-adjust"></i></a></li>
      <li><a href="#"><i class="glyphicon glyphicon-bell"></i></a></li>
      <li><a href="#"><i class="glyphicon glyphicon-user"></i></a></li>      
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>
</div>

Вот как это выглядит на экране P C.

Но на мобильном телефоне он отображает гамбургер, который не нужен.

Конечно, расширение занимает еще больше экрана.

Я добавил некоторый код к Cusom. css (найден в другом месте), в попытаться удалить гамбургер, что он делает:

@media (max-width: 767px) {
.navbar-collapse.collapse {
    display: block;
    position: relative;
    text-align: center;
    top: 0;
}
.navbar-toggle{
  display: none;
}
}

Но меню теперь отображается вертикально (что, очевидно, занимает еще больше экрана.

Я пытался изменить некоторые из css, но не смог.

Как бы я изменил css или код меню, чтобы это исправить?

Спасибо очень за любую помощь.

Обновление

Похоже, у меня это работает сейчас. Мне пришлось немного изменить код, и я все еще работаю над css. Я опубликую решение, когда закончите.

Answer 1

Мне удалось заставить это работать, но потребовалось много изменений в исходном коде и css. Теперь у меня есть очень тонкая панель навигации, которая подходит ко всем 8 кнопкам / ссылкам, которые мне требуются. Он прекрасно отображается на мобильных устройствах и на настольных ПК P C. Все в Chrome, так как это единственный браузер, который мы используем. Значки / кнопки как раз нужного размера для больших пальцев.

Код:

<!--Navigation Bar starts here!-->
<nav class="nav navbar-custom">
    <div class="container-fluid">
        <div class="navbar-header">
            <div class="navbar-left nav-icons">
                <ul class="navbar-nav" style="list-style-type: none;">
                    <span class="fa-stack" style="vertical-align: top;">
                        <a href="https://this-is-not-a-real-domain/" class="btn-Link">
                            <i class="glyphicon glyphicon-home"></i>
                        </a>
                    </span>                 
                    <span class="fa-stack" style="vertical-align: top;">
                        <a href="https://this-is-not-a-real-domain/timesheet/" class="btn-Link">
                            <i class="glyphicon glyphicon-time"></i>
                        </a>
                    </span>                 
                    <span class="fa-stack" style="vertical-align: top;">
                        <a href="https://this-is-not-a-real-domain/buses/" class="btn-Link">
                            <i class="fa fa-bus"></i>
                        </a>
                    </span>                 
                    <span class="fa-stack" style="vertical-align: top;">
                        <a href="https://this-is-not-a-real-domain/files/" class="btn-Link">
                            <i class="glyphicon glyphicon-folder-open"></i>
                        </a>
                    </span>                 
                    <span class="fa-stack" style="vertical-align: top;">
                        <a href="https://this-is-not-a-real-domain/calendar/" class="btn-Link">
                            <i class="glyphicon glyphicon-calendar"></i>
                        </a>
                    </span>                 
                    <span class="fa-stack" style="vertical-align: top;">
                        <a href="https://this-is-not-a-real-domain/firesafety/" class="btn-Link">
                            <i class="glyphicon glyphicon-fire"></i>
                        </a>
                    </span>                                         
                    <span class="fa-stack" style="vertical-align: top;">
                        <a href="https://this-is-not-a-real-domain/supported-devices/" class="btn-Link">
                            <i class="fa fa-desktop"></i>
                        </a>
                    </span>                 
                    <span class="fa-stack" style="vertical-align: top;">
                        <a href="https://maps.google.com/maps?q=This is not a real address" class="btn-Link">
                            <i class="glyphicon glyphicon-map-marker"></i>
                        </a>
                    </span>                 
                </ul>
            </div>
        </div>            
    </div>
</nav>
<!--Navigation Bar Ends here!-->

Пользовательский CSS:

.navbar-custom {
    background-color:#0b73aa;
    color:#ffffff;
    border-radius:4px;
}
.navbar-custom .navbar-nav > li > a {
    color:##ffffff;
}
.btn-Link {
    color: #ffffff;
}
.navbar-nav {
    float: none!important;
    margin: 0px -36px;
}

Изображение Navbar :

Answer 2

Могу ли я использовать Bootstrap 4?

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
        <nav class="navbar justify-content-start navbar-light bg-light">
            <a class="navbar-brand" href="#">Navbar</a>
              <ul class="nav">
            <li class="nav-item">
              <a class="nav-link active" href="#!"><i class="glyphicon glyphicon-adjust">1</i></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#!"><i class="glyphicon glyphicon-bell">2</i></a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#!"><i class="glyphicon glyphicon-user">3</i></a>
            </li>
          </ul>
          </nav>
    </div>