bootstrap4.0検索フォームを含めて、navbarをサインインする

Question

navbarの右隅にあるサインインタブを入れようとしていますが、検索フォームも置いていますが、図に示されており、ナビゲーションバーのために、この私のコードと私はbootstrap4.0を使用していると私は、私は、次の例https://getbootstrap.com/docs/4.0/examples/jumbotron/

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> 
    <a class="navbar-brand" href="{% url 'home' %}">Project</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarsExampleDefault"> 
    <ul class="navbar-nav mr-auto"> 
     {% url 'home' as home %} 
     {% url 'about' as about %} 
     {% url 'about' as contact %} 
     <li {% if request.path == home %} class="nav-item active" {% endif %}> 
     <a class="nav-link" href="{% url 'home' %}">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li {% if request.path == about %} class="nav-item" {% endif %}> 
     <a class="nav-link" href="{% url 'about' %}">About</a> 
     </li> 
     <li {% if request.path == contact %} class="nav-item" {% endif %}> 
     <a class="nav-link" href="{% url 'contact' %}">Contact</a> 
     </li> 
     <li class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" href="" id="dropdown01" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Account</a> 
     <div class="dropdown-menu" aria-labelledby="dropdown01"> 
      {% if not request.user.is_authenticated %} 
      <a class="dropdown-item" href="{% url 'account_login' %}">Login</a> 
      <a class="dropdown-item" href="{% url 'account_signup' %}">Signup</a> 
      {% else %} 
      <a class="dropdown-item" href="{% url 'account_logout' %}">Logout</a> 
      {% endif %} 
     </div> 
     </li> 
    </ul> 
    <form class="form-inline"> 
     <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> 
    <ul class="navbar-form form-inline"> 
     {% if request.user.is_authenticated %} 
     <h3> Hello {{request.user}}</h3> 
     {% else %} 
     <li> 
     <p class="navbar-text">Already have an account?</p> 
     </li> 
     <li class="dropdown"> 
     <a href="http://www.jquery2dotnet.com" class="dropdown-toggle" data-toggle="dropdown">Sign in <b class="caret"></b></a> 
     <ul class="dropdown-menu" style="padding: 15px;min-width: 250px;"> 
      <li> 
       <div class="row"> 
        <div class="col-md-12"> 
        <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav"> 
         {% csrf_token %} 
         <div class="form-group"> 
          <label class="sr-only" for="exampleInputEmail2">Email address</label> 
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required=""> 
         </div> 
         <div class="form-group"> 
          <label class="sr-only" for="exampleInputPassword2">Password</label> 
          <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required=""> 
         </div> 
         <div class="checkbox"> 
          <label> 
          <input type="checkbox"> Remember me 
          </label> 
         </div> 
         <div class="form-group"> 
          <button type="submit" class="btn btn-success btn-block">Sign in</button> 
         </div> 
        </form> 
        </div> 
      <li class="divider"></li> 
      <li> 
      <input class="btn btn-primary btn-block" type="button" id="sign-in-google" value="Sign In with Google"> 
      <input class="btn btn-primary btn-block" type="button" id="sign-in-twitter" value="Sign In with Twitter"> 
      </li> 
      <div class="bottom text-center"> 
      New here ? <a href="{% url 'account_signup' %}"><b>Sign up</b></a> 
      </div> 
      </li> 
     </ul> 
     </div> 
     </li> 
     {% endif %} 
    </ul> 
</nav> 

に変更しようとしています以下のファイル

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 

を使用しています

また、私はウェブページに適切なフッターを取得していません、私はウェブページの下部にそれをしたいですが、別のリンクをクリックすると、下部にとどまっていません。ベータ2の

あなたはベータ1のためのCSSを使用するように見える

<footer> 
<div class= "navbar navbar-inverse navbar-static-bottom" role="navigation"> 
    <div class="navbar-text pull-left"> 
    </div> 
    <div class= "navbar-text pull-right"> 
<!-- Add in your social media/github links here --> 
     <a href="https://github.com"> 
      <i class="fa fa-github-square fa-2x"></i></a> 
    </div> 
    <!--Below is the copyright information for the site. You can fill in your own here.--> 
    <div class="navbar-text pull-left"> 
    &copy; Copyright 2017 
    </div> 
</div> 
</footer> 

Answer 1

クラス=「フォーム・グループのナビゲーションバーに固定されたボトム」