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>

它在网络上看起来不错，但从手机查看时，2 个导航相互堆叠并填满整个屏幕宽度。我想要实现的是它们看起来像同一行的 2 个方形按钮，如下所示：

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

*编辑：由于某种原因，它们在此代码段中没有堆叠为 2 行，在我的智能手机上它们是相同的代码

标签： csstwitter-bootstrapbootstrap-4

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

在此处输入链接描述

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