html - 显示 flex 在导航栏中不起作用

Question

我在那里制作了一个导航栏，我使用了 flexbox ，但它没有响应。在那里我使用绝对位置并给出宽度。如果我在没有导航栏的情况下使用它，它工作正常但在导航栏中它不起作用。

.nav__box{
        display: flex;
        flex-wrap: wrap;
        position: absolute;
        width: 1200px !important;
        top: 60px;
      }
.nav__box--b1,.nav__box--b2,.nav__box--b3,.nav__box--b4,.nav__box--b5
{
   flex:1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
    <div class="container-fluid">
      <ul class="nav navbar-nav">
        <li>
          <a href="#">hellow</a>
          <div class="nav__box">
            <div class="nav__box--b1">
            <ul>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
            </ul>
          </div>
          <div class="nav__box--b2">
            <ul>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
            </ul>
          </div>
          <div class="nav__box--b3">
            <ul>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
            </ul>
          </div>
          <div class="nav__box--b4">
            <ul>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
            </ul>
          </div>
          <div class="nav__box--b5">
            <ul>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
            </ul>
          </div>
        </div>
        </li>
      </ul>
      
    </div>
  </nav>

Answer 1

如果您在 .nav__box 上设置固定宽度，则它不是响应式设置 max-width 并从 中删除 position: relative;。 navbar-nav > li.

.navbar-nav > li {
    position: initial !important;
}
.nav__box{
        display: flex;
        flex-wrap: wrap;
        position: absolute;
        max-width: 1200px !important;
        top: 60px;
        width: 100%;
      }
.nav__box--b1,.nav__box--b2,.nav__box--b3,.nav__box--b4,.nav__box--b5
{
   flex:1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
    <div class="container-fluid">
      <ul class="nav navbar-nav">
        <li>
          <a href="#">hellow</a>
          <div class="nav__box">
            <div class="nav__box--b1">
            <ul>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
            </ul>
          </div>
          <div class="nav__box--b2">
            <ul>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
            </ul>
          </div>
          <div class="nav__box--b3">
            <ul>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
            </ul>
          </div>
          <div class="nav__box--b4">
            <ul>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
            </ul>
          </div>
          <div class="nav__box--b5">
            <ul>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
              <li>ekjffdcee</li>
            </ul>
          </div>
        </div>
        </li>
      </ul>
      
    </div>
  </nav>