更改导航栏以居中标题折叠的屏幕宽度答案

【问题标题】：Changing the screen width a nav bar collapses at with a centered heading更改导航栏以居中标题折叠的屏幕宽度
【发布时间】：2021-10-28 17:01:08
【问题描述】：

我在导航中有一个居中的标题，这会导致导航中的链接在导航栏折叠之前换行 -

我想做的只是让链接比现在更早崩溃。我已经查看了这个问题的所有答案，但无法找到适合我想要完成的工作的答案。下面是我的最后一个测试。我想如果我使用媒体查询更改自定义标题的宽度会有所帮助，但它没有。截至目前，当链接折叠时，汉堡图标也浮动到居中文本的左侧。以后我会担心的。

<nav class ="navbar navbar-expand-xl navbar-light bground">
            <a class ="navbar-brand" href ="#"> NavBar Testing </a>
            <button class ="navbar-toggler" type ="button" data-toggle ="collapse" data-target ="#colNav">
                <span class ="navbar-toggler-icon"></span>
            </button>

            <div class="customHead">
                <text>Centered horizontally and vertically</text>
             </div> 

            <div class ="collapse navbar-collapse" id ="colNav">
                <ul class ="navbar-nav ml-auto">
                    <li class ="nav-item">
                        <a class ="nav-link" href="#"> Services </a>
                    </li>
                    <li class ="nav-item">
                        <a class ="nav-link" href ="#"> About Us</a>
                    </li>
                    <li class ="nav-item">
                        <a class ="nav-link" href ="#"> Contact Us </a>
                    </li>
                </ul> 
            </div>
        </nav>

.navbar-collapse {
    background-color: red;
    float: right;
    width: 25%;
}

.navbar-nav,  .nav-link{
    background-color: yellow;
    color: red !important;    
}

.customHead {
    width: 100%;
    position: relative;
    background: red;
  }
  
  text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -130%);
    background: orange;
    margin-top: 10px;
  }

  @media only screen and (max-width: 1200px) {
    .customHead {
        width: 80%;
    }
    .navbar-toggler {
        background-color: red;
        float: right;
    }
  }

【问题讨论】：

标签： html css bootstrap-4 media-queries nav

【解决方案1】：

除了此处显示的内容之外，还有其他 CSS，因此很难确切知道。但一种解决方法可能是：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .flex {
        flex: 1;
        display: flex;
      }

      .horizontal-center {
        justify-content: center;
      }

      .horizontal-end {
        justify-content: flex-end;
      }

      .vertical-center {
        align-items: center;
      }

      .navbar-nav {
        display: flex;
      }

      .nav-link{
          background-color: yellow;
          color: red !important;
          margin-left: 10px;
      }

      li {
        list-style: none;
      }
    </style>
  </head>
  <body>
    <nav class="flex">
      <div class="flex vertical-center">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#colNav">
          <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#"> NavBar Testing </a>
      </div>

      <div class="flex vertical-center horizontal-center">
        <text>Centered horizontally and vertically</text>
      </div>

      <div class="flex horizontal-end vertical-center">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="#"> Services </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"> About Us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"> Contact Us </a>
            </li>
          </ul>
      </div>
    </nav>
  </body>
</html>

【讨论】：

对不起，我应该包含我的整个 html。认为如果我保持我的 sn-ps 小，故障排除会更容易。我会试试你的建议。谢谢！
用于保持导航栏正确对齐。谢谢！仍然需要努力折叠链接，但这对我来说是一个好的开始。