0
画面を768pxより小さくすると、表が応答しなくなり、ナビゲーションバーとフッターのいずれもページの下部に表示されません。 スパンクラス（col- *）をテーブルの1つの行のtdの1つに追加するだけでも問題ありません。768pxで表が反応しない理由とフッターが最下部にない理由
.clearfix::after {
content: "";
display: table;
clear: both;
}
/*section heading style*/
section h1 {
display: none;
}
/*aside styles*/
aside .panel-default>.panel-heading {
color: #7386D5;
margin: 0;
}
.pager li a {
border-radius: 3px;
}
.nav-stacked li a {
margin-bottom: 15px;
}
/*footer Styles*/
footer {
background: #efefef;
height: 49px;
line-height: 49px;
border: 1px solid #e3e3e3;
}
footer p {
margin: 0;
text-align: center;
color: #555;
}
/*main section styles*/
main {
margin-bottom: 40px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Blog</title>
<!--Link to StyleSheet-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">My Blog</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-paperclip"></span> About</a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Contact</a></li>
<li><a href="#"><span class="glyphicon glyphicon-book"></span> Archives</a></li>
</ul>
</div>
</nav>
</header>
<section>
<h1>Blog Posts</h1>
<div class="container">
<div class="row">
<main class="col-md-9">
<!-- Responsive Bootstrap Table -->
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Biography</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Carter</td>
<td>[email protected]</td>
<td class="col-md-6 col-xs-3 col-sm-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda atque delectus quis itaque cumque neque iste, ullam dolorem quas. Facere voluptate architecto dolorum totam quo doloribus animi velit molestias.</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>[email protected]</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas soluta officiis non, adipisci quaerat doloremque molestiae delectus aspernatur sequi consectetur architecto quas, error magnam nemo, facere voluptatem neque illum repellat!</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>[email protected]</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem modi dignissimos blanditiis doloribus porro labore voluptatem voluptate ipsa nesciunt, repudiandae officiis tempora, veniam, facilis unde, incidunt ipsum beatae! Quae, nulla!</td>
</tr>
<tr>
<td>4</td>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ratione cupiditate architecto assumenda esse accusantium vitae, delectus necessitatibus ea itaque eveniet, totam alias, fuga ut! Saepe culpa fugit, optio sit?</td>
</tr>
</tbody>
</table>
</div>
</main>
<!-- Blog post section ends here -->
<aside class="col-md-3">
<nav class="panel panel-default">
<h3 class="panel-heading">Blog Sidebar</h3>
<ul class="nav nav-pills nav-stacked panel-body">
<li><a href="#">Portfolio</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#collapse-target" data-toggle="collapse">Archives <span class="caret"></span></a>
<ul id="collapse-target" class="collapse nav nav-pills nav-stacked">
<li><a href="#">January <span class="badge">2</span></a></li>
<li><a href="#">February <span class="badge">42</span></a></li>
<li><a href="#">March <span class="badge">23</span></a></li>
<li><a href="#">April <span class="badge">1</span></a></li>
<li><a href="#">May <span class="badge">12</span></a></li>
<li><a href="#">June <span class="badge">43</span></a></li>
<li><a href="#">July <span class="badge">32</span></a></li>
<li><a href="#">August <span class="badge">122</span></a></li>
<li><a href="#">September <span class="badge">76</span></a></li>
<li><a href="#">October <span class="badge">76</span></a></li>
<li><a href="#">November <span class="badge">56</span></a></li>
<li><a href="#">December <span class="badge">98</span></a></li>
</ul>
</li>
</ul>
</nav>
</aside>
</div>
</div>
</section>
<footer>
<p><small><span class="glyphicon glyphicon-copyright-mark"></span> Copyright 2017 programmers inc.</small></p>
</footer>
<!--Link to Javascript-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../javascript/scripts1.js"></script>
</body>
</html>
ブートストラップに反応があり、フッターが最下部にない理由は何ですか。 –
フッターは一番下にあります。そのページの一番下までずっとプッシュするだけの十分なコンテンツがページにないということだけです。あなたが必要とするのは、「Sticky Footers」のためのGoogleであり、ページのコンテンツの量にかかわらず、フッターが画面の下部に常に固執することを前提としています。 – Prajjwal