个人中心
gpt4 book ai didi

css - 如何使页脚不延伸到整个窗口大小

转载 作者：行者123 更新时间：2023-11-28 17:00:04 26 4
gpt4 key购买 nike

我希望我的页脚能够拉伸(stretch)以适应 Bootstrap 中的默认 container width。尽管它在一行内，而这又在 container 标记内，但它会拉伸(stretch)以填充整个屏幕宽度。

如何避免？

请查看:https://codepen.io/jcrr1985/pen/wRKdzL

最佳答案

您没有将页脚放在 container 内类，解决问题；另外，您应该考虑使用 <footer>标记而不是定义页脚，而不是 div上课 .footer ;尽可能多地使用语义标签

body{
	background-color: #E4E4E4;
}

.navbar-brand{
	font-weight: bold;
}

.form-inline input,button{
	font-size: 13px!important;
}

.barraNav{
	border: 1px solid black;
}

.section1Title{
	font-size: 26px;
}

.edit{
	background-color: #0066FF;
	border: 1px solid #00CCFF;
	    padding: 5px 8px;
	    border-radius: 7px;
}

.footer{
	padding: 10px;
	background-color: #666666;
	height: 75px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;

}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/css/tether.min.css" />
		<!--bootstrap.min.css-->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
		<!--jquery.min.js-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="styles.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.0/css/all.css" integrity="sha384-aOkxzJ5uQz7WBObEZcHvV5JvRW3TUc2rNPA7pe3AwnsUohiw1Vj2Rgx2KSOkF5+h" crossorigin="anonymous">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>


    <body ng-controller = "evalController">


	<div class="wrapper">

		<div class="container">
			<div class="row">
				<div class="col-12 col-sm-12">
					<div class="barraNav">
						<nav class="navbar navbar-expand-lg navbar-light bg-light">
						  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
						    <span class="navbar-toggler-icon"></span>
						  </button>

						  <div class="collapse navbar-collapse" id="navbarSupportedContent">
						    <ul class="navbar-nav mr-auto">
						      <li class="nav-item active">
						        <a class="nav-link" href="#">
						        	<img src="logo.png">
						        </a>
						      </li>
						      
						    </ul>
						    <form class="form-inline my-2 my-lg-0">
						      <input class="form-control mr-sm-2" type="search" placeholder="Buscar usuarios" aria-label="Buscar usuarios">
						      <button class="btn btn-primary my-2 my-sm-0" type="submit">Nuevo usuario +</button>
						    </form>
						  </div>
						</nav>
					</div>		
				</div>	
			</div>
			<div class="row">
				<div class="col-12 col-sm-12">
					<div class="section1">
						<nav class="navbar navbar-expand-lg navbar-light">
						  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
						    <span class="navbar-toggler-icon"></span>
						  </button>

						  <div class="collapse navbar-collapse" id="navbarSupportedContent">
						    <ul class="navbar-nav mr-auto">
						      <li class="nav-item active">
						        <a class="nav-link section1Title" href="#"><strong>LISTA DE USUARIOS</strong>
						        	<span class="sr-only">(current)</span>
						        </a>
						      </li>
						      
						    </ul>
						    <form class="form-inline my-2 my-lg-0">
						      <input class="form-control mr-sm-2" type="search" placeholder="Buscar usuarios" aria-label="Buscar usuarios">
						      <button class="btn btn-primary my-2 my-sm-0" type="submit">Nuevo usuario +</button>
						    </form>
						  </div>
						</nav>
					</div>		
				</div>	
			</div>

			<div class="row section2">
				<table class="table table-striped">
				  <thead>
				    <tr>
				      <th scope="col">Nombre de Usuario</th>
				      <th scope="col">Cargo</th>
				      <th scope="col">E-mail</th>
				      <th scope="col">edit</th>
				      <th scope="col">Password</th>
				       <th scope="col">Del</th>
				    </tr>
				  </thead>
				  <tbody>
				    <tr>
				      <th scope="row">1</th>
				      <td>Mark</td>
				      <td>Otto</td>
				      <td><button class="edit"><i class="fas fa-pencil-alt"></i></button></td>
				      <td></td>
				      <td></td>
				      <td></td>
				    </tr>
				    <tr>
				      <th scope="row">2</th>
				      <td>Jacob</td>
				      <td>Thornton</td>
				      <td><button class="edit"><i class="fas fa-pencil-alt"></i></button></td>
				      <td></td>
				      <td></td>
				      <td></td>
				    </tr>
				    <tr>
				      <th scope="row">3</th>
				      <td>Larry</td>
				      <td>the Bird</td>
				      <td><button class="edit"><i class="fas fa-pencil-alt"></i></button></td>
				      <td></td>
				      <td></td>
				      <td></td>
				    </tr>
				  </tbody>
				</table>		
			</div>
		
    <footer class="row footer">
			<div class="col-12 col-sm-12">
				<span>© 2018</span>
			</div>
		</footer>
    </div>	
		
	</div>
      
	<!--Tether.min.js-->	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></script>

	<!--bootstrap.min.js-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

关于css - 如何使页脚不延伸到整个窗口大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53749152/

26 4 0
文章推荐： html - CSS 通配符选择器 - 没有覆盖？
文章推荐： javascript - 如何在javascript中替换任何特定多字符字符串之前的字符串的一部分？
文章推荐： css - Pin It 按钮的位置问题
文章推荐： javascript - SAP Cloud SDK for JavaScript 的 AttachmentService 问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com