我正在尝试在导航栏的右上角放置“登录”标签,我也想放置搜索表单,但是我没有如图所示正确对齐,这是我的导航栏代码,我正在使用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">
© Copyright 2017
</div>
</div>
</footer>
最佳答案
class =“ form-group navbar-fixed-bottom”
关于html - bootstrap4.0包括搜索表单并在导航栏中签名,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47403729/