css - 导航选项卡 - 堆叠为方形按钮而不是 2 行

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>

它在网络上看起来不错，但是当从移动设备上查看时，两个导航会堆叠在一起并填充屏幕的整个宽度。 我想要实现的是它们看起来像同一行的两个方形按钮，如下所示:

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

*编辑:由于某种原因，他们在这个代码片段中没有堆叠为两行，但在我的智能手机上它们却堆叠为两行，相同的代码

Answer 1

使用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;
   }
}

enter link description here

<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>