Почему переносятся слова в табе?

Question

[YakutD]

Здравствуйте, делаю меню с помощью nav-pills, Bootstrap4, по задумке на мобильных устройствах pills расположены в контейнере с горизонтальным скролом, поэтому нужно чтобы текст в них писался в одну линию, но он, почему то, всегда переносится. Совершенно не понимаю в чем причина, правил влияющих на это не обнаружил. Вот скрин:

Вот код:

<ul class="nav nav-pills nav-justified nav-pills-mobile"  id="myTab" role="tablist">
                <li class="nav-item nav-pills" >
                  <a class="nav-link active" id="1stitem-tab" data-toggle="tab" href="#1stitem" role="tab" aria-controls="1stitem" aria-selected="true">First item</a>
                </li>
                <li class="nav-item nav-pills">
                  <a class="nav-link " id="1stitem-tab" data-toggle="tab" href="#1stitem" role="tab" aria-controls="1stitem" aria-selected="false">First item</a>
                </li>
                <li class="nav-item nav-pills">
                  <a class="nav-link " id="1stitem-tab" data-toggle="tab" href="#1stitem" role="tab" aria-controls="1stitem" aria-selected="false">First item</a>
                </li>
                <li class="nav-item nav-pills">
                  <a class="nav-link " id="1stitem-tab" data-toggle="tab" href="#1stitem" role="tab" aria-controls="1stitem" aria-selected="false">First item</a>
                </li>
                <li class="nav-item nav-pills">
                  <a class="nav-link " id="1stitem-tab" data-toggle="tab" href="#1stitem" role="tab" aria-controls="1stitem" aria-selected="false">First item</a>
                </li>
                <li class="nav-item nav-pills">
                  <a class="nav-link " id="1stitem-tab" data-toggle="tab" href="#1stitem" role="tab" aria-controls="1stitem" aria-selected="false">First item</a>
                </li>
                <li class="nav-item nav-pills">
                  <a class="nav-link " id="1stitem-tab" data-toggle="tab" href="#1stitem" role="tab" aria-controls="1stitem" aria-selected="false">First item</a>
                </li>
              </ul>

.nav-pills-mobile{
  padding: 10px;
  overflow-x: auto; overflow-y:hidden;flex-wrap: nowrap;
}
.nav-pills-mobile li {
  text-align: center;
  display: inline-block!important; //отчаяние :(
}
.nav-pills-mobile li a{
  clear:both;
  float:left;
}

Answer 1

[Виталий Киренков]

На каком-то из уровней добавьте `white-space: nowrap` и не будут переносится.

Comments

[YakutD]

Вы только что спасли мою жизнь и нервные клетки. Большое вам спасибо.