Bootstrap 4 中扩展搜索栏的 CSS 转换

Question

我在 Bootstrap 4 导航栏中有一个悬停时展开的搜索表单。悬停在搜索表单上有一个平滑的过渡，但旁边的菜单突然跳转。我之前用带有 float 元素的 Bootstrap 3 完成过这种布局，一切都顺利滑过。它与 flexbox 的行为不同。我仍在学习 flexbox —— 是否可以在不使用 float 的情况下将行中的所有内容平滑地滑过？

See Example JSFiddle Here

#secondaryNav {
  justify-content:flex-end;
  transition:all 0.5s;
}

#secondaryNav #searchform {

  .input-group {
    justify-content:flex-end;
  }

  .search-form-control {
     transition: all 0.5s;
     max-width: 0;
     overflow: hidden;
  }    

}

#secondaryNav #searchform:hover {

    .form-control {
        max-width:100%;
    }

}

Answer 1

这里有一个完整的工作示例。您需要在正常状态和焦点上设置输入宽度。平滑效果也需要过渡。

#search{width:75px;transition:width .5s ease}
#search:focus{width:200px}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav mr-auto"></ul>
    <div class="text-light mr-4">Lorem Ipsum</div>
    <form class="form-inline my-2 my-lg-0">
      <input id="search" class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>