Question

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

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

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

Answer 1

在CSS中使用此代码：

@media (max-width: 1000px) {
.alignment{
margin:0 auto;
}
}

Answer 2

在使用媒体查询特定设备宽度之后，您可以了解一下。

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

徽标移动导致响应式导航栏问题

2 个答案: