Предотвратить отображение панели навигации Bootstrap в несколько строк без свертывания в значок

У меня есть простая панель навигации Bootstrap, в которой есть всего пара элементов. А при ширине меньше 768 отображается в 2 ряда. Как отобразить оба элемента в одной строке с большей шириной (я не хочу использовать функцию свертывания)

    <nav class="navbar navbar-default">
      <div class="row">
        <ul class="nav navbar-nav">
          <li class=""><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li> 
        </ul>
      </div>
    </nav>

css twitter-bootstrap twitter-bootstrap-3
person Pramodh    schedule 04.04.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

(Обновлено 2018 г.)

navbar-nav всегда будет складывать элементы при ширине экрана менее 768 пикселей, но вы можете переопределить вертикальное стекирование следующим образом.

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

Демонстрация Bootstrap 3

В Bootstrap 4 вы просто используете класс navbar-expand...

<nav class="navbar navbar-light bg-light navbar-expand">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li><a href="#" class="nav-link">Item 1</a></li>
      <li><a href="#" class="nav-link">Item 2</a></li> 
    </ul>
  </div>
</nav>

Демонстрация Bootstrap 4

person Zim    schedule 04.04.2016