Question

更新：对于将来遇到此问题的任何人：在此代码段中您无法看到我正在谈论的问题，但我找到了问题的原因：在原始代码我有另一个导航 - 导致问题的主导航栏display:block

我正在使用导航标签，以便您可以从单个页面中选择2个页面：

＆＃13;

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

＆＃13;

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

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

*编辑：由于某些原因，他们不会在此代码段中叠加2行，在我的智能手机上，他们会这样做，代码相同

Answer 1

因为bootstrap在flex-wrap: wrap css中定义了.nav，这就是为什么当文本宽度大于设备宽度时标签会转到下一行。

因此，请尝试在导航类中编写自定义类，并在导航中定义flex-wrap: nowrap css

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

导航标签 - 堆叠为方形按钮而不是2行

1 个答案: