如何在导航栏中调整表格？

Question

i'm create a navbar in my html file and when i style my navbar for tablet devices or mobile devices. The form in the navbar won't adjust.

please tell me what should i do.

<nav class="navbar navbar-expand-md">
            <a class="navbar-brand" href="index.php">Login System</a>
            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapseMenu">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapseMenu">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="index.php">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="">Portfolio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="">Contact</a>
                    </li>
                </ul>
                <form class="form-inline" action="includes/login.inc.php" method="post">
                    <input type="text" class="form-control" name="mailuid" placeholder="Username/Email">
                    <input type="password" class="form-control" name="pwd" placeholder="Password">
                    <button class="btn btn-primary" type="submit" name="login-submit">Login</button>
                </form>
                <a class="btn btn-warning" href="signup.php">SingUp</a>
                <form action="includes/logout.inc.php" method="post">
                    <button class="btn btn-primary" type="submit" name="logout-submit">LogOut</button>
                </form>
            </div>
        </nav>