Создание нижнего колонтитула внутри столбца начальной загрузки
Я использую этот шаблон начальной загрузки здесь, чтобы создать страницу для моего приложения.
В центральном столбце (col-sm-7), где у меня будет форма, я хочу создать нижний колонтитул/область навигации внизу, который фиксируется снизу, так что я могу добавить кнопки (например, сохранить, далее, назад).
Я пробую разные вещи, например, элемент нижнего колонтитула, навигационную панель загрузки с "navbar-fixed-bottom" и простую строку с div в ней со стилем, где bootom равен 0, и позиция фиксирована, но нет похоже, работают правильно.
Проблема заключается в том, что когда я добавляю любой из этих стилей, упомянутых выше, ширина элемента, зафиксированного внизу, не остается в пределах столбца центра (col-sm-7). Он заканчивается на всей странице или недостаточно. Я просто не могу заставить его содержаться в центрированном столбце
Любой совет здесь, чтобы получить что-то, что угодно, зафиксированное в нижней части только центрального столбца, чтобы я мог поместить в него кнопки, было бы полезно!
Вот пример того, что я пробовал до сих пор
У этого есть нижний колонтитул.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Messages</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Search..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p><a href="#">My Profile</a></p>
<img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="well">
<p><a href="#">Interests</a></p>
<p>
<span class="label label-default">News</span>
<span class="label label-primary">W3Schools</span>
<span class="label label-success">Labels</span>
<span class="label label-info">Football</span>
<span class="label label-warning">Gaming</span>
<span class="label label-danger">Friends</span>
</p>
</div>
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<p><strong>Ey!</strong></p>
People are looking at your profile. Find out who.
</div>
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<div class="panel-body">
<p contenteditable="true">Status: Feeling Blue</p>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-thumbs-up"></span> Like
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>John</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Bo</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Jane</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Anja</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<footer style="bottom: 0; position: fixed" class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</div>
<div class="col-sm-2 well">
<div class="thumbnail">
<p>Upcoming Events:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button class="btn btn-primary">Info</button>
</div>
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
</body>
</html>
Ответы
Ответ 1
Сначала вам нужно понять базовую структуру, вам не нужно размещать нижний колонтитул в классах -col, посмотрите на структуру
![введите описание изображения здесь]()
В стандартном случае вы можете добавить свой код таким образом
<header>
<nav>
<!-- Put the navbar here -->
</nav>
</header><!-- Header -->
<section>
<div class="container">
<div class="row">
<div class="col-sm-3">
</div><!-- .left items like my profile etc.. -->
<div class="col-sm-7">
</div><!-- . main content section here-->
<div class="col-sm-2">
</div><!-- /. upcomming section will be here -->
</div><!-- /.row -->
</div><!-- /.container -->
</section> <!-- /.content section -->
<footer>
</footer><!-- footer always stay at bottom -->
Я изменил ваш код, как способ
header,
.full-width {
float: left;
width: 100%;
}
footer {
background-color: #555;
color: white;
padding: 15px;
border: 1px solid black;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#">Messages</a>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Search..">
<span class="input-group-btn">
<button class="btn btn-default" type="button"> <span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<section class="full-width">
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p><a href="#">My Profile</a>
</p>
<img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="well">
<p><a href="#">Interests</a>
</p>
<p> <span class="label label-default">News</span> <span class="label label-primary">W3Schools</span> <span class="label label-success">Labels</span> <span class="label label-info">Football</span> <span class="label label-warning">Gaming</span>
<span class="label label-danger">Friends</span>
</p>
</div>
<div class="alert alert-success fade in"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<p><strong>Ey!</strong>
</p>
People are looking at your profile. Find out who.</div>
<p><a href="#">Link</a>
</p>
<p><a href="#">Link</a>
</p>
<p><a href="#">Link</a>
</p>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<div class="panel-body">
<p contenteditable="true">Status: Feeling Blue</p>
<button type="button" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-thumbs-up"></span> Like</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>John</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Bo</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Jane</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Anja</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-2 well">
<div class="thumbnail">
<p>Upcoming Events:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p><strong>Paris</strong>
</p>
<p>Fri. 27 November 2015</p>
<button class="btn btn-primary">Info</button>
</div>
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
</section>
<footer>
<button>save</button>
</footer>
</body>
</html>
Ответ 2
добавить 2 стиля в тег footer
<style>
footer {
width: 95%;
z-index: 100;
}
</style>
Ответ 3
Здесь я изменил ваш код, возможно, он может вам помочь.
Пройдите через ссылка
КОД
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Messages</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Search..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p><a href="#">My Profile</a></p>
<img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="well">
<p><a href="#">Interests</a></p>
<p>
<span class="label label-default">News</span>
<span class="label label-primary">W3Schools</span>
<span class="label label-success">Labels</span>
<span class="label label-info">Football</span>
<span class="label label-warning">Gaming</span>
<span class="label label-danger">Friends</span>
</p>
</div>
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<p><strong>Ey!</strong></p>
People are looking at your profile. Find out who.
</div>
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
</div>
<div class="col-sm-7" style="position:relative;padding-bottom:10px;">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<div class="panel-body">
<p contenteditable="true">Status: Feeling Blue</p>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-thumbs-up"></span> Like
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>John</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Bo</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Jane</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Anja</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 text-center" style="background-color:#404040;color:#fff;position:absolute;bottom:0px;">
Footer
</div>
</div>
</div>
<div class="col-sm-2 well">
<div class="thumbnail">
<p>Upcoming Events:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button class="btn btn-primary">Info</button>
</div>
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
</body>
</html>
Вам просто нужно изменить положение вашего центрированного div на относительное и сделать div с абсолютной положением внутри этого и зафиксировать его снизу.
Ответ 4
Насколько я понимаю, вам нужен фиксированный нижний колонтитул, который всегда виден в нижней части окна и имеет ширину, как в центральном столбце.
Моя идея состоит в том, чтобы использовать предопределенный класс начальной загрузки navbar-fixed-bottom с нижним колонтитулом внутри:
<nav class="navbar-fixed-bottom">
<div class="container">
<div class="row">
<div class="col-sm-7 col-sm-offset-3">
<footer>
<p>Footer Text</p>
</footer>
</div>
</div>
</div>
</nav>
Вот фрагмент:
footer {
background-color: #555;
color: white;
padding: 15px;
margin: 0 -15px;
border-radius: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Messages</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Search..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
</ul>
</div>
</div>
</nav>
<nav class="navbar-fixed-bottom">
<div class="container">
<div class="row">
<div class="col-sm-7 col-sm-offset-3">
<footer class="text-center">
<p>Footer Text</p>
</footer>
</div>
</div>
</div>
</nav>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p><a href="#">My Profile</a></p>
<img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="well">
<p><a href="#">Interests</a></p>
<p>
<span class="label label-default">News</span>
<span class="label label-primary">W3Schools</span>
<span class="label label-success">Labels</span>
<span class="label label-info">Football</span>
<span class="label label-warning">Gaming</span>
<span class="label label-danger">Friends</span>
</p>
</div>
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<p><strong>Ey!</strong></p>
People are looking at your profile. Find out who.
</div>
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<div class="panel-body">
<p contenteditable="true">Status: Feeling Blue</p>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-thumbs-up"></span> Like
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>John</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Bo</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Jane</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Anja</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-2 well">
<div class="thumbnail">
<p>Upcoming Events:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button class="btn btn-primary">Info</button>
</div>
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
Ответ 5
Это слишком сложно, когда я копирую ваш фрагмент, это простой код, который я написал, возможно, вам это нравится.
section{
height:700px;
background:#ccc;
position:relative;
z-index:20;
margin-bottom:100px;
}
footer {
background-color: #555;
color: white;
width:100%;
height:100px;
display:flex;
align-items:center;
justify-content:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.navbar{
margin-bottom:0;}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Messages</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Search..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
</ul>
</div>
</div>
</nav>
</header>
<section class="container">
your content here, it along content i believe
</section>
<footer style="bottom: 0; position: fixed" class="container-fluid text-center">
Footer Text
</footer>
</body>
Ответ 6
Я думаю, что самый простой способ добиться этого - добавить нижеследующий стиль в нижний колонтитул.
left: 0;
width: 100%;
Ответ 7
Используйте bootstrap affix и scrollspy. Не забудьте передать свой собственный CSS для аффиксации класса, чтобы установить желаемый стиль.
.affix {
bottom: 0;
margin: 0 auto;
background-color:#000;
z-index:9999;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
</style>
</head>
<body data-spy="scroll" data-target=".save">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Messages</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Search..">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<div class="row">
<div class="col-sm-3 well">
<div class="well">
<p><a href="#">My Profile</a></p>
<img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
</div>
<div class="well">
<p><a href="#">Interests</a></p>
<p>
<span class="label label-default">News</span>
<span class="label label-primary">W3Schools</span>
<span class="label label-success">Labels</span>
<span class="label label-info">Football</span>
<span class="label label-warning">Gaming</span>
<span class="label label-danger">Friends</span>
</p>
</div>
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<p><strong>Ey!</strong></p>
People are looking at your profile. Find out who.
</div>
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default text-left">
<div class="panel-body">
<p contenteditable="true">Status: Feeling Blue</p>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-thumbs-up"></span> Like
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>John</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Bo</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Jane</p>
<img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="well">
<p>Anja</p>
<img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar">
</div>
</div>
<div class="col-sm-9">
<div class="well">
<p>Just Forgot that I had to mention something about someone to someone about how I forgot something, but now I forgot it. Ahh, forget it! Or wait. I remember.... no I don't.</p>
</div>
</div>
</div>
<div data-spy="affix" data-offset-top="150"><button>save</button><button>edit</button><button>delete</button></div>
</div>
<div class="col-sm-2 well">
<div class="thumbnail">
<p>Upcoming Events:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button class="btn btn-primary">Info</button>
</div>
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
</body>
</html>
Ответ 8
Вы можете исправить весь раздел внизу, а нижний колонтитул останется в столбце.
CSS:
.footer-outer{
width:100%;
position:fixed;
bottom:0;
left:0;
z-index:1000;
}
<section class="footer-outer">
<div class="container">
<div class="row">
<div class="col-sm-5">
</div>
<div class="col-sm-7">
<footer>
</footer>
</div>
</div>
</div>
</section>
Ответ 9
Просто добавьте следующий код для своего второго шаблона, один с навигационной панелью.
<style>
.navbar.navbar-fixed-bottom {
width: 95%;
margin: auto;
}
</style>
