Bootstrap 4 Navbar Flex打破品牌中心

时间:2018-10-06 13:32:05

标签: html css css3 flexbox bootstrap-4

我目前以品牌徽标为中心,在品牌的左右两侧有两个菜单。缩小到移动设备尺寸时,我试图将左侧的搜索菜单项更改为右侧,但是由于某些原因,它确实很棘手,实际上并没有向右弯曲,而是换行了。 >

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

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

1 个答案:

答案 0 :(得分: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与“ move”的自定义类一起添加到相对位置来添加CSS。然后在右上角添加适当的媒体查询,以调整搜索范围。

ul .move {
  position: relative;
}

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

我希望这就是你想要的