フォームを送信ボタンを押してマイナビを終了する

Question

私のウェブサイトのログイン/ログアウトを行うには、単純なボタンを使用して、モーダルフォームを作成します。

ログアウトの場合、私が見つけた最も良い方法は、ログアクションにつながるログアウトボタンを含むダミーフォームを使用することです。

すべてが機能しますが、ダミーフォームがナビゲーションバーのデザインを削除します。

PHPコード：

 <!-- Login --> 
 
     <?php 
 
     if(!isset($_SESSION['user'])) { 
 
      echo ' 
 
      <button class="btn btn-outline-info my-2 my-sm-0" type="button" data-toggle="modal" data-target="#ModalExample" style="margin-left: 10px">Login</button> 
 
     '; 
 
     } 
 
     else { 
 
      echo ' 
 

 
     <form action="actions/log.php" method="post"> 
 
     <input type="submit" value="Log out" class="btn btn-outline-danger my-2 my-sm-0" style="margin-left: 10px"> 
 
     </form> 
 
     '; 
 
     } 
 
     ?>

ナビゲーションバー：

<nav class="navbar fixed-top navbar-toggleable-md navbar-light bg-faded" data-spy="affix" data-offset-top="90"> 
 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> 
 
    <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <a class="navbar-brand" href="#">Beauty Website</a> 
 

 
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> 
 
    <ul class="navbar-nav mr-auto mt-2 mt-md-0"> 
 
     <li class="nav-item active"> 
 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#about">About us</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#othersec">Services</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#versatility">Offers</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#lightbox">Gallery</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#opportunities">Shop</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#contact">Appointment</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#contact">Contact us</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link disabled" href="#">Disabled</a> 
 
     </li> 
 
    </ul> 
 
    <form class="form-inline my-2 my-lg-0"> 
 
     <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
 
    </form> 
 
    </div> 
 
</nav>

あなたは私がCOUどのように知っていますかそれをより良くする？

Answer 1

助けてくれてありがとう、私はnavbar形式でクラスを持っていたことを忘れてしまった。

<!-- Login --> 
<?php 
if(!isset($_SESSION['user'])) { 
    echo ' 
    <button class="btn btn-outline-info my-2 my-sm-0" type="button" data-toggle="modal" data-target="#ModalExample" style="margin-left: 10px">Login</button> 
    '; 
} 
else { 
    echo ' 

    <form class="form-inline my-2 my-lg-0" action="actions/log.php" method="post"> 
    <input type="submit" value="Log out" class="btn btn-outline-danger my-2 my-sm-0" style="margin-left: 10px"> 
    </form> 
    '; 
} 
?>