帶有徽標移動的響應式導航欄問題

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>