как сделать так, чтобы нижний колонтитул не растягивался до полного размера окна - PullRequest
Новая
       1

как сделать так, чтобы нижний колонтитул не растягивался до полного размера окна

0 голосов
/ 12 декабря 2018

Я хочу, чтобы мой нижний колонтитул растягивался так, чтобы он соответствовал стандартному container width из начальной загрузки.Несмотря на то, что он находится внутри строки, которая, в свою очередь, находится внутри тега container, он выравнивается по всей ширине экрана.

Как этого избежать?

пожалуйста, проверьте его по адресу: https://codepen.io/jcrr1985/pen/wRKdzL

1 Ответ

0 голосов
/ 12 декабря 2018

Вы не размещаете нижний колонтитул внутри класса container, который устраняет проблему;кроме того, вместо определения div с классом .footer вы должны использовать вместо этого тег <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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...