Навигационные вкладки - складываются как квадратные кнопки, а не как две линии

Question

Обновление : всем, кто столкнется с этим в будущем: в этом фрагменте вы не увидите проблему, о которой я говорю, но я выяснил причину проблемы: в исходном коде я есть другая навигация - главная навигационная панель с display:block, которая вызвала проблему

Я использую навигационные вкладки, чтобы вы могли выбирать между 2 страницами на одной странице:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
      
      
           <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <div class="container">
            <ul class="nav nav-tabs justify-content-center">
                <li class="nav-item">
                    <a class="nav-link active" href="#" style="color:white;background-color:blue">First Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Second Link</a>
                </li>
            </ul>
        </div>

В Интернете все выглядит хорошо, но при просмотре с мобильного телефона 2 навигационных элемента накладываются друг на друга и занимают всю ширину экрана. Я пытаюсь добиться того, чтобы они выглядели как две квадратные кнопки на одной линии, например:

-------------------
|  First | Second |
|  Link  |  Link  |   
-------------------

* Редактировать: По какой-то причине они не складываются как 2 строки в этом фрагменте, на моем смартфоне они делают один и тот же код

Answer 1

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

Поэтому попробуйте написать собственный класс в вашем классе навигации и определить flex-wrap: nowrap css в вашем nav

.custom.nav {
  flex-wrap: nowrap;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <ul class="nav nav-tabs justify-content-center custom">
    <li class="nav-item">
      <a class="nav-link active" href="#" style="color:white;background-color:blue">First Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Second Link</a>
    </li>
  </ul>
</div>

Answer 2

Используйте br тег

CSS:

.nav-tabs .nav-item .nav-link br{
   display: none;
}
@media (min-width: 400px) and (max-width: 600px){
   .nav-tabs .nav-item .nav-link br{
       display: block;
   }
}

введите описание ссылки здесь

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>


<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<div class="container">
    <ul class="nav nav-tabs justify-content-center">
        <li class="nav-item text-center">
            <a class="nav-link active" href="#" style="color:white;background-color:blue">First <br> Link</a>
        </li>
        <li class="nav-item text-center">
            <a class="nav-link" href="#">Second <br> Link</a>
        </li>
    </ul>
</div>