Question

我试图在导航栏的右角放置标签，我也想放置搜索表单，但是我没有得到正确的对齐方式，如图所示，这是我的导航栏代码和我正在使用bootstrap4.0，我正在使用以下文件

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

我正在尝试修改以下示例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>

此外，我没有在网页中获得正确的页脚，我希望它位于网页的底部，但是当我点击不同的链接时，它不会停留在底部。

<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

class =＆＃34; form-group navbar-fixed-bottom＆＃34;

bootstrap4.0包含搜索表单并在导航栏中签名

1 个答案: