我目前以品牌徽标为中心,在品牌的左右两侧有两个菜单。缩小到移动设备尺寸时,我试图将左侧的搜索菜单项更改为右侧,但是由于某些原因,它确实很棘手,实际上并没有向右弯曲,而是换行了。 >
<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>
我当前有两个搜索菜单,因为它正在页面上更改位置,这是正确的方法吗?
答案 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;
}
}
我希望这就是你想要的