Bootstrap 4 Navbar Flex 打破品牌中心答案

【问题标题】：Bootstrap 4 Navbar Flex Breaking with Brand CenterBootstrap 4 Navbar Flex 打破品牌中心
【发布时间】：2018-10-07 08:50:20
【问题描述】：

目前，我的品牌徽标居中，品牌左侧和右侧有两个菜单。当向下移动到移动尺寸时，我试图将左侧的搜索菜单项更改为右侧，但事实证明这很棘手，由于某种原因，它实际上并没有向右弯曲而是换行。

<nav class="navbar navbar-expand-lg navbar-light">

  <button class="navbar-toggler" type="button">
    <i class="material-icons">menu</i>
  </button>

  <a class="navbar-brand mx-auto" href="/">
    <img src="logo.svg" height="25" class="d-inline-block align-top">
  </a>

  <div class="navbar-collapse" id="navbarNav">
     <ul class="navbar-nav mr-auto">
         <li class="nav-item d-none d-sm-none d-md-block">
             <a class="nav-link" href="#" id="searchToggle">
               <i class="material-icons">search</i>
             </a>
         </li>
     </ul>
     <ul class="navbar-nav ml-auto justify-content-end">
         <li class="nav-item search-mobile d-block d-sm-block d-md-none">
             <a class="nav-link" href="#" id="searchToggle">
               <i class="material-icons">search</i>
             </a>
         </li>
         <li class="nav-item d-none d-lg-block d-xl-block">
             <a class="nav-link" href="#">Father's Day</a>
         </li>
         <li class="nav-item d-none d-lg-block d-xl-block">
             <a class="nav-link" href="#">Stores</a>
         </li>
         <li class="nav-item d-none d-lg-block d-xl-block">
             <a class="nav-link" href="#">Join</a>
         </li>
     </ul>
 </div>


</nav>

我目前有两个搜索菜单，因为它正在更改页面上的位置，这是正确的方法吗？

【问题讨论】：

标签： html css flexbox bootstrap-4

【解决方案1】：

当我使用 Boostrap 遇到该问题时，我会这样做。我希望你发现它同样有用。我首先在父 UL 元素中添加了一个自定义的“move”类。

</ul>
 <ul class="navbar-nav ml-auto justify-content-end move">
     <li class="nav-item search-mobile d-block d-sm-block d-md-none">
         <a class="nav-link" href="#" id="searchToggle">
           <i class="material-icons" id="search">search</i>
         </a>
     </li>
     <li class="nav-item d-none d-lg-block d-xl-block">
         <a class="nav-link" href="#">Father's Day</a>
     </li>
     <li class="nav-item d-none d-lg-block d-xl-block">
         <a class="nav-link" href="#">Stores</a>
     </li>
     <li class="nav-item d-none d-lg-block d-xl-block">
         <a class="nav-link" href="#">Join</a>
     </li>
 </ul>

然后，我通过将具有“移动”自定义类的父 ul 设置到相对位置来添加 CSS。然后添加适当的媒体查询以将搜索调整到右上角。

ul .move {
  position: relative;
}

@media (max-width: 992px) {
#search {
  position: absolute;
  top: 0;
  right: 0;
  padding: 12px;
 }
}

我希望这就是你要找的东西

【讨论】：