时间戳

首页 > 解决方案 > 带有徽标移动的响应式导航栏问题

jquery - 带有徽标移动的响应式导航栏问题

问题描述

我希望在使用智能手机等设备时徽标移到中间并隐藏登录和注册按钮。

我成功隐藏了按钮，但未能移动徽标。这是代码。

<nav class="px-md-5 p-3 py-lg-3 py-5 bg-dark text-white d-flex flex-row justify-content-between align-items-center">
  <div class="d-flex alignment ">
    <h1>LOGO</h1>
  </div>
  <div class="d-flex flex-row align-items-center justify-content-between ">
    <a href="" class="btn border-white text-white mr-3 d-sm-none d-none d-md-none d-lg-block font_login">LOGIN</a>
    <a href="" class="btn border-white text-white d-sm-none d-none d-md-none d-lg-block">Register</a>
  </div>
</nav>

标签： jqueryhtmlcss

解决方案

看看下面的使用媒体查询对于某些设备宽度，你可以实现这一点。

@media only screen and (max-width: 600px) {
  .d-flex {
      width: 100%;
      text-align: center;
  }
}
<nav class="px-md-5 p-3 py-lg-3 py-5 bg-dark text-white d-flex flex-row justify-content-between align-items-center">
  <div class="d-flex alignment ">
    <h1>LOGO</h1>
  </div>
  <div class="d-flex flex-row align-items-center justify-content-between ">
    <a href="" class="btn border-white text-white mr-3 d-sm-none d-none d-md-none d-lg-block font_login">LOGIN</a>
    <a href="" class="btn border-white text-white d-sm-none d-none d-md-none d-lg-block">Register</a>
  </div>
</nav>

推荐阅读