我的<div class =“content”“=”“>与nav-justified重叠

时间：2015-11-20 12:13:45

标签： javascript jquery html css

我的登录页面有一个导航对齐列表，因为您可以使用登录/密码或访客模式进行连接。 问题是，如果我点击登录，仍会显示来宾，如果我喜欢回复来宾。

代码：

＆＃13;
＆＃13; 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="{{ app.request.basepath }}/css/main.css">
    <link rel="stylesheet" href="{{ app.request.basepath }}/css/templatemo_main.css">
    <link rel="icon" type="image/icon" href="{{ app.request.basepath }}/favicon.ico"/>
	<link rel="stylesheet" href="{{ app.request.basepath }}/css/bootstrap.min.css">
    <title>Nautilus - {% block title %}Authentification{% endblock %}</title>
</head>
<body>
	<div class="container">
		<h2 class="text-center">{{ block('title') }}</h2>
		{% if error %}
			<div class="alert alert-danger">
				<strong>Erreur lors de l'authentification !</strong> {{ error }}
			</div>
		{% endif %}
	
		<div class="row">
			<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
				<ul class="nav nav-tabs nav-justified">
					<li class="active"><a href="#invite" data-toggle="tab">Invité</a></li>
					<li><a href="#connexion" data-toggle="tab">Connexion</a></li>
				</ul>
			</div>
		</div>
	
		<div class="tab-content">
			<div class="tab-pane fade in active connexion" id="invite">
				<div class="container">
					<div id="content">
						<div class="well">
							<form class="form-signin form-horizontal" role="form" action="{{ path('login_check') }}" method="post">
								<div class="form-group">
									<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
										<input type="text" name="_username" value="Invite" class="form-control" required>
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
										<input type="password" name="_password" class="form-control">
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
										<button type="submit" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-log-in"></span> Connexion</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="tab-pane fade connexion" id="connexion">
			<div class="container">
				<div id="content">
					<div class="well">
						<form class="form-signin form-horizontal" role="form" action="{{ path('login_check') }}" method="post">
							<div class="form-group">
								<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
									<input type="text" name="_username" placeholder="Entrez votre login" class="form-control" required>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
									<input type="password" name="_password" class="form-control" required placeholder="Entrez votre mot de passe">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
									<button type="submit" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-log-in"></span> Connexion</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="{{ app.request.basepath }}/js/jquery.min.js"></script>
    <script src="{{ app.request.basepath }}/bootstrap/dist/bootstrap.min.js"></script>
    <script src="{{ app.request.basepath }}/js/Chart.min.js"></script>
    <script src="{{ app.request.basepath }}/js/templatemo_script.js"></script>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

图片： Error

1 个答案:

答案 0 :(得分：0)

问题在于你的加价。

在包含class tab-content的div中，您放置了所有tab-pane div。 #connexion的那个人在外面。

这是正确的标记。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<link rel="stylesheet" href="{{ app.request.basepath }}/css/main.css">
    	<link rel="stylesheet" href="{{ app.request.basepath }}/css/templatemo_main.css">
    	<link rel="icon" type="image/icon" href="{{ app.request.basepath }}/favicon.ico"/>
    	<link rel="stylesheet" href="{{ app.request.basepath }}/css/bootstrap.min.css">
    	
    </head>
    <body>
    	<div class="container">
    	
    		<div class="row">
    			<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
    				<ul class="nav nav-tabs nav-justified">
    					<li class="active"><a href="#invite" aria-controls="profile" role="tab" data-toggle="tab">Invité</a></li>
    					<li><a href="#connexion" aria-controls="profile" role="tab" data-toggle="tab">Connexion</a></li>
    				</ul>
    			</div>
    		</div>

    		<div class="tab-content">
             
    			<div role="tabpanel" class="tab-pane fade in active connexion" id="invite">
    				<div class="container">
    					<div id="content">
    						<div class="well">
    							<form class="form-signin form-horizontal" role="form" action="{{ path('login_check') }}" method="post">
    								<div class="form-group">
    									<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
    										<input type="text" name="_username" value="Invite" class="form-control" required>
    									</div>
    								</div>
    								<div class="form-group">
    									<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
    										<input type="password" name="_password" class="form-control">
    									</div>
    								</div>
    								<div class="form-group">
    									<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
    										<button type="submit" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-log-in"></span> Connexion</button>
    									</div>
    								</div>
    							</form>
    						</div>
    					</div>
    				</div>
    			</div>

    			<div  role="tabpanel" class="tab-pane fade" id="connexion">
    				<div class="container">
    					<div id="content">
    						<div class="well">
    							<form class="form-signin form-horizontal" role="form" action="{{ path('login_check') }}" method="post">
    								<div class="form-group">
    									<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
    										<input type="text" name="_username" placeholder="Entrez votre login" class="form-control" required>
    									</div>
    								</div>
    								<div class="form-group">
    									<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
    										<input type="password" name="_password" class="form-control" required placeholder="Entrez votre mot de passe">
    									</div>
    								</div>
    								<div class="form-group">
    									<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
    										<button type="submit" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-log-in"></span> Connexion</button>
    									</div>
    								</div>
    							</form>
    						</div>
    					</div>
    				</div>
    			</div>

    		</div>
    		
    		
    	</div>

    	<script src="{{ app.request.basepath }}/js/jquery.min.js"></script>
    	<script src="{{ app.request.basepath }}/bootstrap/dist/bootstrap.min.js"></script>
    	<script src="{{ app.request.basepath }}/js/Chart.min.js"></script>
    	<script src="{{ app.request.basepath }}/js/templatemo_script.js"></script>

    </body>
    </html>

相关问题
最新问题