Почему моя загрузочная навигационная панель не отображается в строке?

Вот мой html с использованием bootstrap (я уверен, что bootstrap установлен правильно)

<nav class="navbar navbar-inverse">
    <div class="container-fluid">

        <div class="navbar-header">
            <a class="navbar-brand">Rebar</a>
        </div>

        <div>
            <ul class="nav navbar-nav">
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</nav>

Когда он отображает три ссылки, они отображаются как элементы блока.

Ответы

Ответ 1

Это потому, что в Bootstrap css для li это:

.nav>li {
  position: relative;
  display: block;
}

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

EDIT: Обновлен снипп для работы по запросу (см. Комментарии ниже этого ответа)

.navbar .container-fluid>.navbar-header {
  float: left;
  margin-right: 10px;
}
.navbar .navbar-nav {
  float: left;
  margin: 5px;
}
.nav>li {
  float: left;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">

    <div class="navbar-header">
      <a class="navbar-brand">Rebar</a>
    </div>

    <div style="display: inline-block;">
      <ul class="nav navbar-nav">
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Ответ 2

В настоящее время на Bootstrap 4. Гибкая компоновка, по-видимому, по умолчанию является столбчатой и в моей экосистеме.

Самое непосредственное переопределение для этого случая использования:

.navbar-nav { 
    flex-direction: row;
}

Ответ 3

Я не говорю, что другие ответы неверны в любом случае, но все, что действительно необходимо для выполнения исходного вопроса, - это запись в файле подтемы CSS:

.nav.navbar-nav li {
    float: left;
}

Следует отметить, что класс до li будет меняться в зависимости от выбора в разделе "Внешний вид" темы и других факторов. Например, прямо из коробки класс был бы.menu.nav li

Ответ 4

Если вы так хотите, проверьте этот DEMO

<nav class="navbar navbar-default navbar-static-top" id="topnavbar">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top_navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div id="top_navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#">Link 1</a>
                </li> 
                <li>
                    <a href="#">Link 2</a>
                </li>
                <li>
                    <a href="#">Link 3</a>
                </li>

            </ul>

        </div>
    </div>
</nav>

Ответ 5

Я столкнулся с той же проблемой. Попробуй это:

.navbar-nav {
  display: inline-block;
}

.navbar-nav>li {
   display: inline-block;
}

Это сработало для меня

Ответ 6

Вы можете сделать встроенный navbar легко с помощью этого настраиваемого класса CSS:

Css:

.nav.inline-navbar>li{
    display: inline-block;
}

Теперь используйте его в своем Html:

.....
<ul class="nav navbar-nav inline-navbar">
   ......
</ul>
.....

Ответ 7

В настоящее время на Bootstrap 4 встроенный navbar может быть достигнут добавлением класса "nav-item" на элементах списка и "nav-link" класса по таким тегам:

<nav class="navbar navbar-inverse">
    <div class="container-fluid">

        <div class="navbar-header">
            <a class="navbar-brand">Rebar</a>
        </div>

        <div>
            <ul class="nav navbar-nav">
                <li class="nav-item">
                   <a class= "nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                   <a class= "nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                   <a class= "nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Ответ 8

Просто столкнулся с этой проблемой с BS4. Я узнал, что мне нужно добавить navbar-expand-lg для моего навигатора.

<nav class="navbar navbar-expand-lg">

Ответ 9

Для изменения быстрого добавления я добавляю style="display: inline" в положение ниже:

    <div class="collapse navbar-collapse" id="navbarSupportContent" style="display: inline">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#" onclick="toggleContent('single')">One Line Param</a>
            </li>

            <li class="nav-item active">
                <a class="nav-link" href="#" onclick="toggleContent('multi')">Multi Line Param</a>
            </li>

        </ul>
    </div>